BFC（Block Formatting Context）即“块级格式化上下文”。
根据W3C的定义：浮动元素，绝对定位元素，非块级盒子的块级容器（例如inline-blocks，table-cells， table-captions）以及overflow属性值不是visible（visible是overflow的默认值）的块级盒子（视口除外），这些元素就会为他们的内容创建一个BFC。
规则：
- BFC的区域是不存在边距重叠现象的（非bfc区域，会存在垂直方向上，margin重叠 的现象。解决方法之一就是使用BFC）
- BFC是一个独立的容器，里面不会影响外面，外面也不会影响里面
- BFC元素在计算高度的时候，是会把内部其他BFC元素的高度计算进去的。
<style>
.container {
margin: 30px auto;
width: 600px;
height: 300px;
}
.p {
border: solid 3px #a33;
}
.c {
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float:left;
}
</style>
<body>
<div class="container">
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</div>
</body>
运行效果是这样的
image.png
因为使用
float:left使 c 变成了BFC，也脱离了文档流，文档流元素不承认他的位置。p不会被内容 c 撑开
所以我们利用在BFC的第三点渲染规则 ：BFC元素在计算高度的时候，是会把内部其他BFC元素的高度计算进去的。把p盒子变成BFC，p就会被理想的撑开。
效果：
image.png
浮动带来容器高度塌陷的问题，导致后面布局混乱。是我们不想遇到的。所以就有了清除浮动一说
清除浮动
如果有办法让父元素包住子元素，那么这个区域就是BFC了，就好进行布局管理了，而这个方法就是清除浮动
(1)为父级元素增添合适的高度
(2)子级增加一个div,加上css属性clear:both
(3)父级div定义 伪类:after和 zoom
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}
IE8以上和非IE浏览器才支持:after
(4)BFC处理
- 设置父元素
float的值不为none - 设置父元素
overflow的值不为visible - 设置父元素
display的值为inline-block、table-cell、table-caption - 设置父元素
position的值为absolute或fixed
网友评论