bfc详解

最新推荐文章于 2024-03-23 00:06:53 发布

Bubbleegum.

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/weixin_45803556/article/details/103499490

版权

1.布局规则：

1.内部的Box会在垂直方向，从顶部开始一个接一个地放置。（即每个块级元素独占一行）

2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。（垂直方向上margin塌陷）

3. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（规则1产生的原因）

4. BFC的区域不会与float box重叠。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6. 计算BFC的高度时，浮动元素也参与计算。

2.如何产生BFC：

1.float 除了none以外的值

2.overflow 除了visible 以外的值（hidden，auto，scroll ）

3.display (table-cell，table-caption，inline-block, flex, inline-flex)

4.position值为（absolute，fixed）

3.应用bfc

1.解决margin叠加问题

<style>

.bb{
	width:100px;
	height:100px;
	background-color:blue;
    margin-bottom:10px;
}
.cc{
	width:100px;
	height:100px;
	background-color:yellow;
    margin-top:20px;
}
</style>
</head>
<body>
<div class="bb">div1</div>
<div class="cc">div2</div>

在这里插入图片描述
给div1设置display:inline-block属性

此时由于div1元素通过display:inline-block触发了BFC，此时的div1就是一个独立的BFC了，根据规则BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

2.清除内部浮动

当一个标准流中的盒子中所有的子元素都进行了浮动，并且没有给盒子设置高度时，那么这个盒子的整个高度就会塌陷

.aa{
	
	border:1px solid red;
}
.bb{
	width:100px;
	height:100px;
	background-color:blue;
	float:left;
}
.cc{
	width:100px;
	height:100px;
	background-color:yellow;
    float:left;
}
</style>
</head>
<body><div class="aa">
<div class="bb">div1</div>
<div class="cc">div2</div></div>
</body>

在这里插入图片描述
所以可以给父元素增加浮动，根据规则6.计算BFC的高度时，浮动元素也参与计算。

3.布局

两个div满足规则3，与外层border相连，由于浮动的div不占标准文档流位置，所有出现重叠现象

.bb{
	width:100px;
	height:100px;
	background-color:blue;
	float:left;
}
.cc{
	width:300px;
	height:150px;
	background-color:yellow;
 }
</style>
</head>
<body>
<div class="bb">div1</div>
<div class="cc">div2</div>

在这里插入图片描述
当我们给div2添加上overflow: hidden时；此时div2产生BFC，不与float元素重叠，满足规则4

Bubbleegum.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bfc详解

1.布局规则：1.内部的Box会在垂直方向，从顶部开始一个接一个地放置。（即每个块级元素独占一行）2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。（垂直方向上margin塌陷）3. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（规则1产生的原因...
复制链接

扫一扫