-
什么是BFC? BFC(Block Formatting Contex)，中文为块格式化上下文。在HTML文档流中，拥有BFC属性的元素可以看成一个独立的容器，容器里面的子元素不会影响到外面的元素。
-
满足什么条件，元素会形成BFC？
- float的值不是none。
- position的值不是static或relative。
- overflow的值不是visible
- display的值是inline-block、table-cell、flex、table-caption、inline-flex。
-
BFC有什么作用？
-
清除浮动。在正常的文档流中，块级元素是按照从上自下，内联元素按照从左到右的方式填充，如果元素设置了float或者position:absoulte，那么这个元素就会脱离文档流。比如容器中只有一个设置了float:left的元素，这时候父元素的高度是无法被撑开的，如果我们想要外层元素依然能够包裹住里面的float元素，我们可以给父元素设置成BFC模式(overflow:hidden)，从而把float元素限制在当前容器中。
-
避免margin重叠。处在同一个BFC的两个元素，margin是会重叠的，比如.div1{height:100px;margin-bottom:20px;}.div2{height:100px;margin-top:20px}，由于margin的重叠，它们在文档中占据的总高度为100px+20px+100px，如果我们想要它们的margin不重叠，可以把它们都单独放到一个BFC里面，实现最终总高度为100px+20px+20px+100px=220px，原理还是那句话，每个BFC都可以看成是一个单独的容器，里面的子元素不会影响到外面的元素。
-
防止元素被浮动元素覆盖。例子，.left{float:left,width:100px;height:100px;backgroud-color:red;}.right{height:100px;backgroud-color:blue;}，如果这样写，.left元素会浮动在父元素左上角，遮挡住.right的部分内容，如果不想被遮挡，可以给.right元素设置为BFC元素，如设置overflow:hidden，因为.right元素此时是BFC区域，为了保持自身的独立性，它会通过自身变窄的形式，避免与.left元素重叠，从而最终形成了左右布局。
-
