1. 定义：快级上下执行文，他是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level box如何布局，并且于这个区域外部毫不相干。 2. 那些元素会生成BFC; 只要满足已上一点，将将会创建一个BFC * float 属性不为none * position为absolute或fixed * display 为inline-block, table-cell,table-caption,flex,inline-flex * overflow 不为 visible 3. BFC中盒子对齐 * 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列 * 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘） 4. 外边距折叠 * 常规流布局时，盒子都是垂直排列，两者之间的间距由各自的外边距所决定，但不是二者外边距之和 ``` * 外边距折叠规则 ``` * 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 * 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值 * 两个外边距一正一负时，折叠结果是两者的相加的和。 5. 利用BFC避免外边距折叠 * BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，**若两个相邻元素在不同的BFC中，就能避免外边距折叠** ``` <div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <div class="newBFC"> <p>Sibling 3</p> </div> </div> 对应的CSS： .container { background-color: red; overflow: hidden; /* creates a block formatting context */ } p { margin: 10px 0; background-color: lightgreen; } .newBFC { overflow: hidden; /* creates new block formatting context */ } ``` 6. BFC包含浮动 * 如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。 ``` <div class="container"> <div>Sibling</div> <div>Sibling</div> </div> .container { overflow: hidden; /* 创建一个bfc */ background-color: green; } .container div { float: left; background-color: lightgreen; margin: 10px; } ```