BFC(块级格式化上下文)
BFC是什么
BFC是一个独立的布局环境，它外部的元素布局与外界互不影响。
产生了BFC的元素内的布局环境：
- 计算该元素的高度时,浮动子元素的高度也参加计算
- BFC区域不会与非该区域内的浮动元素重叠
- 创立BFC的元素不会与它的子元素进行外边距合并,即：处于不同BFC区域的元素之间不会产生外边距合并。
造成BFC的条件
BFC渲染区域由某个HTML元素创立,以下元素会创立：
- 根元素（html元素）
- 浮动、相对与固定定位元素
- overflow不等于visible的块盒
- display为inline-block、table-cell、table-caption、flex的元素
1、个别状况下，在计算元素高度不会将其子元素中的浮动元素计算在内：
<style> * { margin: 0; padding: 0; } .main { border: 1px solid red; } .left { width: 30px; height: 30px; float: left; margin: 0 10px; background: #008c8c; text-align: center; line-height: 30px; } </style> <body> <div class="main"> <div class="left">1</div> <div class="left">2</div> <div class="left">3</div> <div class="left">4</div> </div> </body>显示成果如下：
咱们通过设置main元素overflow:hidden让其产生BFC区域：
<style> * { margin: 0; padding: 0; } .main { border: 1px solid red; overflow: hidden; } .left { width: 100px; height: 100px; float: left; margin: 0 10px; background: #008c8c; text-align: center; line-height: 100px; } </style> <body> <div class="main"> <div class="left">1</div> <div class="left">2</div> <div class="left">3</div> <div class="left">4</div> </div> </body>失去的成果为：
2、个别状况下,惯例流块盒在排列时会疏忽浮动元素，导致被浮动元素被笼罩，例如：
<style> * { margin: 0; padding: 0; } .item1 { width: 100px; height: 100px; float: left; background: blue; } .item2 { height: 200px; background: red; }</style><body> <div class="item1"></div> <div class="item2"></div></body>成果如下：
通过设置item2元素的overflow:hidden让其产生BFC区域
<style> * { margin: 0; padding: 0; } .item1 { width: 100px; height: 100px; float: left; background: blue; } .item2 { height: 200px; background: red; overflow:hidden; }</style><body> <div class="item1"></div> <div class="item2"></div></body>item2在排列的时候避开了浮动元素item1，成果如下：
3、在有时候咱们会发现，父子元素之间产生了外边距合并：
<style> * { margin: 0; padding: 0; } .parent { width: 300px; height: 300px; background: red; margin-top: 30px; margin-left: auto; margin-right: auto; } .children { width: 100px; height: 100px; background: blue; margin-top: 10px; }</style><body> <div class="parent"> <div class="children"></div> </div></body>成果如下：
咱们通过设置parent元素的overflow：hidden使其产生BFC区域
<style> * { margin: 0; padding: 0; } .parent { width: 300px; height: 300px; background: red; margin-top: 30px; margin-left: auto; margin-right: auto; overflow:hidden; } .children { width: 100px; height: 100px; background: blue; margin-top: 10px; }</style><body> <div class="parent"> <div class="children"></div> </div></body>成果如下：
以上这三种状况是BFC常见的利用：
- 解决浮动元素令父元素高度坍塌问题
- 解决非浮动元素被浮动元素笼罩的问题
- 解决外边距合并的问题