css学习笔记 BFC

BFC

float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为inline-block、table-cell、flex、table-caption或者inline-flex
position的值不为relative和static。

BFC & float

float

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

this means that floats with zero outer height or negative outer height do not shorten line boxes.

上述文档的意思是，因为浮动块并不在正常文档流中，所以在浮动块之前或之后创建的没有定位的块状元素会在垂直排布，且不受浮动块的影响。但是后面的line box会满足浮动块的margin box的情况下平分剩余空间，也即是会缩短自己的宽度而满足浮动块的margin box宽度。

而现在我们来一段html布局

1
2
3

<div class="left"></div><!--float:left-->
<div class="middle">hhhh</div>
<div class="right"></div><!--float:right-->

我们会发现最后的结果是left box和middle box在一行，right box在第二行的最后边。而当我们用chrome调试器查看的时候，发现middle box的宽度是100%的，left box覆盖了middle box左边的部分

而这正正解释了float box脱离了文档流，浮在了middle box的上方，而middle box的排布不会受到float box的影响。而至于为什么right box会在第二行呢？后面的浮动元素形成新的bfc另起一行。

但是既然middle box实际上在float box之下，可是文本却不会被float box覆盖，而是紧跟的float box。这也是上述文档所说的，文本组成的line box会水平变窄来给浮动元素腾出了空间。随着文本的增加，最后文本将环绕在浮动元素的下方，且因下方么有浮动元素，line box也无需缩短宽度。这也就是我们常说的文字环绕布局。

如果我们只想要两列布局而不是环绕布局呢？
我们只需要给middle box生成一个新的bfc，即使用本文开头的任意方法，而我们选用造成影响最小的overflow:hidden，则此时，新生成的bfc不会和float box重合，因为BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

当我们换了一下顺序，发现三个box都在一行，因为middle box无视前面的float box直接排列，前面两个 float box其实是直接浮在middle box上面的。
这种方法和实现三栏布局。

1
2
3

<div class="left"></div> <!--float:left-->
<div class="right"></div><!--float:right-->
<div class="middle"></div>

BFC区域不会与浮动元素区域重叠

两栏
- 浮动 + bfc
三栏布局
- 左右中排序，左右框两边float，中间生成新bfc
避免文字环绕
解决方法：中间自适应元素生成新的bfc / 文字所在容器生成新的bfc

计算BFC的高度时浮动子元素的高度也参与计算

可解决的问题：高度坍塌
解决方法：让父元素生成bfc包裹浮动元素

BFC & margin

BFC中相邻的块级元素外边距会折叠

可解决的问题：防止margin折叠
解决方法：即相邻的box生成新的bfc

###未完待续

BFC