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

时间 2019-11-06

标签前端工程师手册 bfc 笔记繁體版

原文原文链接

什么是BFC

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

BFC有哪些特性

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

BFC如何建立

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

BFC有哪些用途

防止被浮动元素遮盖，好比实现两栏布局html
```
.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
app

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

.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;
   }

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

<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特性第三点，设置out元素为overflow: hidden
ui

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