学习中的问题：03BFC

BFC

什么是BFC？

看了好多大佬写的，总结起来巴拉巴拉就是说，BFC(块级格式化上下文)。弄懂了名字还是没理解什么意思。

又看到说在css2.1中，有三种定位方案：

(1).普通流（Normal Flow）

    在普通流里，元素会按照在html中的上下顺序排列布局，行内元素水平排列，排满一行才会换行，块元素会被渲染为完整的一

    行。除非特别指定，否则所有元素都会被认定为普通流。

(2).浮动（Float）

    会在普通流的位置出现，然后向左或者向右移动，知道碰到父元素的border或者其他浮动元素。

(3).绝对定位（Absolute Positioning）

    绝对定位会让元素脱离普通流。不会影响其他元素的布局。

这里说的普通流就是我之前理解的标准文档流吧。

现在可以理解BFC了，具有BFC属性的元素从样式上好像看不出与普通流元素有什么区别，这里说BFC是一种属性。具有这个属性的盒子，里面的元素不论怎么打仗，都不会影响到外面的元素，而且它会包括浮动元素。

BFC的特性：

    1.所有的内部的BOX从上到下排列。

    2.垂直方向的距离由margin决定，但是会发生margin的折叠。

        可能是父子折叠，例如对子元素使用margin-top,会应用到父元素上。

        还有兄弟元素的bottom和top的折叠。

       （ 但是也可以利用不同的BFC的margin不会重叠来解决。在一个元素上触发一个新的BFC）

    ***************************************************************************************************

    补充margin折叠的原因。

     css2.1写到：    所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元    

     素，并且它们之间没有非空内容、 Padding或Border分隔。

    3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也  

       是如此。（这点可以用来实现自适应布局，浮动元素贴在一侧）

    4.BFC区域不会与float-box叠加。（这点很重要，可以实现自适应布局）

    5.计算高度时，浮动元素也参与计算。（这点也很重要，可以用来清除浮动造成的父元素高度坍塌）