关于BFC

参考  http://www.html-js.com/article/1866(很棒! 还有栗子)

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

https://yimity.com/2013/05/10/bfc-block-formatting-contexts.html

 

 

BFC针对相对定位

BFC 解决的问题:

float高度塌陷 (父元素触发BFC)

父容器和第一个子元素顶部margin重叠  和最后一个子元素底部margin重叠（即margin消失）（父元素触发BFC）

浮动元素和非浮动元素重叠  （非浮动元素触发BFC）

 

BFC特性

BFC主要是消除两个相邻元素间的影响  建立一个隔离的空间，断绝空间内外元素间相互的作用。

在同一个bfc中 相邻且无分隔(指这个元素的margin挨着另一个元素的margin   他们没有padding border作为间隔)元素垂直margin会折叠

想要使他们的margin不重叠 可以再套一个带有padding的div  或者带有border的div（当然这不是什么好办法  这破坏了我的本意）

 

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

1. 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
2. 处于同一个BFC中的元素相互影响，可能会发生margin collapse；
3. 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
5. 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；------解决高度塌陷问题
6. 浮动盒区域不叠加到BFC上；----------所以可以通过非浮动元素触发BFC来解决浮动和非浮动元素重叠的问题

 

 

 

触发BFC
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素