BFC布局规则(特性)
(1)在BFC下,内部的Box会在垂直方向一个接一个的放置
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
</div>
.main {
width: 200px;
height: 200px;
border: 2px solid #000;
overflow: hidden;
}
.box1 {
height: 50px;
background: blue;
}
.box2 {
height: 50px;
background: yellow;
}
效果如下:
(2)Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠
.main {
width: 200px;
height: 200px;
border: 2px solid #000;
overflow: hidden;
}
.box1 {
background: blue;
margin: 20px 0;
}
.box2 {
background: yellow;
margin: 20px 0;
}
结果如下图:
可以看到,box1与box2之间的距离为20px,即,会发生折叠
(3)在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left),即使存在浮动也是如此
在main中添加如下代码
<div class="box3"></div>
box3的样式如下:
.box3 {
width: 200px;
height: 50px;
background: #999;
float: left;
}
效果如下:
(4)BFC区域不会与浮动的元素重叠
一般情况下,浮动元素会脱离普通文档流,覆盖其它元素,例如:
<div class="left"></div>
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.left {
float: left;
width: 100px;
height: 150px;
background: blue;
}
.main {
width: 200px;
height: 200px;
background: red;
}
效果如下所示
将main设置为BFC
可以看出,BFC区域不会与浮动的元素重叠
(5)计算BFC的高度时,浮动元素也参与计算
触发BFC的条件
满足以下条件的其中一条,都会触发BFC
(1)body根元素
(2)浮动元素,float除none以外的值
(3)绝对定位元素: position(absolute、fixed)
(4)display为以下其中之一的值:inline-block,table-call、table-caption、fixe、inline-flex
(5)overflow除了visible以外的值(hidden,auto,scroll)
BFC的应用
(1)解决浮动塌陷问题
什么是塌陷?
当父元素只包含浮动元素,且父元素未设置高度和宽度的时候,由于子元素脱离了文档流,父元素里没有内容,那么它的高度就会塌缩为零
举个例子:
<div class="parent">
<div class="child"></div>
</div>
样式为:
.parent {
border: 2px solid #000;
}
.child {
width: 200px;
height: 200px;
float: left;
background: red;
}
结果如图所示
由于BFC区域不会与float box重叠,所以可以为其父元素创建BFC,修改parent的内容如下:
.parent {
border: 2px solid #000;
overflow: auto;
}
结果如下:
(2)同一个BFC下,盒子之间的外边距会重叠的问题
解决办法:将每个盒子都设置为BFC
(完)