什么是BFC
直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.
BFC属于普通流，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。
如何触发BFC,如何为元素添加BFC这个属性呢
1.根元素 (<html>)
2.浮动元素(元素的float值不是none)
3.绝对定位(元素的position为absolute或fixed)
4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group、
table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
5.overflow值不为visible的元素
6.contain的值为layout-content,paint的元素
1.可以避免外边距重叠
html代码
<div class="cube"></div> <div class="cube"></div>css代码
.cube{ width: 100px; height: 100px; background-color: cyan; margin: 100px; }本应该上面div的margin-bottom和下面div的margin-top都为100px，呈现200px的外边距，但是块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠。
解决办法
把两个div包裹在两个不同container容器中，用over-hidden触发container的BFC
.container{ overflow: hidden; }
2.清除浮动
正常我们希望的是看到一圈红色边框包裹着一个天蓝色方块，但是父元素失去了高度支撑；因为我们添加了浮动，使得子元素脱离了文档流，所以只剩下20px边距高度，同样，我们可以通过overflow属性触发父容器的BFC，从而达到清除浮动效果。
css代码：
.parent{ border: 10px solid red; } .child{ width: 100px; height: 100px; background-color: cyan; float: left; }html代码
<div class="parent"> <div class="child"></div> </div>解决办法
给父元素设置overflow属性触发父容器的BFC
.parent{ border: 10px solid red; overflow: hidden; }
3.阻止元素被浮动元素覆盖
给一个元素添加浮动属性，覆盖了另一个元素；如果不要覆盖，触发被覆盖元素的BFC属性
css代码
.cube2{ width: 200px; height:200px; background-color: red; }html代码
<div class="cube1"></div> <div class="cube2"></div>解决办法
.cube2{ width: 200px; height:200px; background-color: red; overflow: hidden; }
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
