一、BFC是啥？
Block Formatting Context，它是一个独立的渲染区域，只有块级元素才有BFC,它规定了内部的Block Box如何布局，并且与这个区域外部毫不相干。
二、那些元素会生成BFC
①、根元素。
②、浮动元素。
③、position为absolute或者fixed。
④、非块级元素转换成块级元素,例如：display:inline-block,flex等。。
⑤、overflow属性不为visible。
三、BFC的一些作用。
1、 自适应两栏布局
初始代码：
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; }</style><body> <div class="aside"></div> <div class="main"></div></body>复制代码初始效果：
上面因为aside元素向左浮动脱离字节流，导致其覆盖在main之上。那有什么办法能让其不在main上空呢？
BFC的区域不会与float box重叠。
因为BFC的这一规则，可以将main元素转为BFC元素，例
.main { overflow: hidden;}复制代码效果如下：
2、浮动元素的父元素高度塌陷的解决。
初始代码：
<style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; }</style><body> <div class="par"> <div class="child"></div> <div class="child"></div> </div></body>复制代码初始效果：
计算
BFC的高度时，浮动元素也参与计算
添加代码：
.par { overflow: hidden;}复制代码效果：
扫一扫
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
