【前端工程师手册】BFC笔记

2019年9月14日 114次阅读来源: 亚古

什么是BFC

首先呢，BFC的全称是Block Formatting Context，BFC其实就是页面上的一块区域，有它自己的渲染规则，决定了其内部子元素的定位等等。而且BFC内部的box的布局，与这个容器外的毫不相关。

BFC有哪些特性

在同一个BFC元素中，其子元素按照文档流一个接一个的排列，而且垂直相邻的两个块级元素在上下边距可能会发生外边距（margin）合并，为什么说是可能呢，因为即使在同一个BFC中发生了外边距合并也有其他的解决办法（MDN-外边距合并）
创建了BFC的元素不会与浮动元素重叠，并且会出现在浮动元素所在行的剩余空间（如果放的下的话）
创建了BFC的元素计算高度时会算上浮动元素，也就是说在创建了BFC的元素内部，浮动元素不会造成父元素塌陷

BFC如何创建

根元素。我自己测试的是<HTML>元素会自己创建一个BFC
浮动元素，即float取值不是none的元素
overflow不是visible的元素，这个经常用来清除浮动
display为tabel-cell、table-caption或inline-block

BFC有哪些用途

防止被浮动元素遮盖，比如实现两栏布局
```
   .aside {
     background: red;
     width: 170px;
     height: 600px;
     float: left;
   }
   .main {
     background: green;
     height: 700px;
   }
   <div class="aside"></div>
   <div class="main"></div>
   
```
侧栏aside把主栏main遮住了一部分，根据上面说的BFC特性第二点：创建了BFC的元素不会与浮动元素重叠，并且会出现在浮动元素所在行的剩余空间，设置main的overflow: hidden

解决上下相邻的两个块级外边距合并（创建了BFC的元素和它的子元素不会发生折叠）

   .up {
     height: 100px;
     background: red;
     margin-bottom: 20px;
   }
   .down {
     height: 100px;
     background: green;
     margin-top: 10px;
   }
   <div class="up"></div>
   <div class="down"></div>

本来上下两个元素间距应该是30px但是现在却是20px，现在分别把这两个元素放入不同的BFC

   <div class="wrapper">
       <div class="up"></div>
   </div>
   <div class="wrapper">
       <div class="down"></div>
   </div>
   .wrapper {
     overflow: hidden;
   }

《【前端工程师手册】BFC笔记》

清除浮动
浮动元素会带来父元素高度塌陷

   <div class="out">
       <div class="in"></div>
   </div>
   .out {
     border: 1px solid;
     padding: 10px;
     /* overflow: hidden; */
   }
   .in {
     width: 100px;
     height: 100px;
     background: red;
     float: left;
   }

《【前端工程师手册】BFC笔记》
根据上面说的BFC特性第三点，设置out元素为overflow: hidden

参考资料：
BFC-博客园
 BFC-MDN
深入理解BFC和Margin Collapse

    原文作者：亚古
    原文地址: https://segmentfault.com/a/1190000014442979
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。