css布局-文档流（Normal Flow）、BFC

一、常规流布局/文档流布局（Normal Flow）（相对于盒子模型讲的）

• 将窗体自上而下分成一行一行，块级元素从上至下、 行内元素在每行中按从左至右的依次排放元素。

二、脱离文档流

1. 定义：
   元素脱离常规流之后，将不再在常规流中占据空间，而是处于浮动状态（可以理解为漂浮在常规流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在常规流中的其他元素将忽略该元素并填补其原先的空间。
2. 脱离文档流(Normal Flow）的方式
   a.浮动（float）

.border1 div {
    border: 1px solid red;
    background-color: aquamarine;
    height: 50px;
    width: 50px;
    margin-bottom: 50px;
    text-align: center;
    line-height: 50px;
    float: left; //向左浮动
 }

设置浮动后：
-1.父元素高度塌陷
-2.影响浮动元素后面的元素（后面的元素上浮）
-3.自身宽高，变成内容的宽高（没有设宽高时）
-4.浮动元素不遮盖内容
b.绝对定位 position: absolute

.border1 div {
    border: 1px solid red;
    background-color: aquamarine;
    height: 50px;
    width: 50px;
    margin-bottom: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;//绝对定位
 }

c.固定定位 position: fixed
和绝对定位 position: absolute效果一致
-1.父元素高度塌陷
-2.元素重叠，因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
三、文本流（只适用于文本）
四、BFC(Block formatting context): 称为块级格式化上下文，是CSS中的一种渲染机制。它决定了块级元素如何对它的子元素内容进行布局，以及与子元素同级别的兄弟元素的关系和相互作用。
BFC是解决普通文档流的问题：普通文档流的布局规则

1、浮动的元素是不会被父级计算高度
2、非浮动元素会覆盖浮动元素的位置
3、margin会传递给父级
4、两个相邻的元素上下margin会重叠

触发BFC的方式（以下任意一条就可以）

1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、table-caption和inline-block之一
4、position的值不为static或者releative中任何一个

---

参考：
盒模型之BFC与文档流对比（二）
一天搞定CSS：BFC布局与普通文档流布局比较–15