正常流

• 当遇到块级盒，排入块级格式化上下文
• 当遇到行内级盒或文字，首先尝试排入块级格式化上下文，否则创建一个行盒，先将行盒排版，行盒会创建一个行内级格式化上下文
• 遇到float盒，把盒的顶部跟当前行内级上下文上边缘对齐，然后根据float的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒

块级格式化上下文：BFC

在遇到如下四种元素时，都会为他们的内容创建新的块级格式化上下文 (Block Fromatting Context，BFC)：

• 浮动元素
• 绝对定位元素
• 非块级盒子的块级容器（如inline-block，table-cell，table-caption）
• overflow不为visible的块级盒子

BFC是一个独立的布局环境，其中的元素布局不受外界的影响，并且其中的块盒和行盒（行盒由一行中所有的内联元素所组成）都会垂直地沿着其父元素的边框排列。对齐方式：每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。

BFC的作用

避免外边距折叠

常规流布局下，垂直方向上相邻的两个盒子会产生外边距折叠，即两个外边距结合成一个单独的外边距；计算规则：同正同负则取绝对值大的，否则取二者之和。在BFC中，产生外边距折叠需要在同一个BFC中。

<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <div class="newBFC">
        <p>Sibling 3</p>
    </div>
</div>
<style>
    .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 */
    }
</style>

除此之外，还可以设置border或padding阻隔margin、用内联元素（文字）阻隔、给父元素设置高度来阻止外边距折叠。

2. BFC包含浮动

浮动元素脱离文档流，通常用伪元素撑开含有浮动元素的父容器，用BFC也可以撑开。

<div class="container">
    <div>Sibling</div>
    <div>Sibling</div>
</div>
<style>
.container {
    overflow: hidden; /* creates block formatting context */
    background-color: green;
}
.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}
</style>

3. BFC可以避免文字环绕

对于浮动文字的环绕问题，我们可以用外边距，也可以用BFC。

<div class="container">
    <div class="floated">
        Floated div
    </div>
    <p>
        Quae hic ut ab perferendis sit quod architecto, 
        dolor debitis quam rem provident aspernatur tempora
        expedita.
    </p>
</div>

4. BFC可以多列布局

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

常见布局

垂直居中同一排元素

1. 设置line-height与height一致
2. 利用padding
3. 模拟表格：{display:table-cell; vertical-align:middle;}

盒子在页面水平垂直居中

方法1，不需要知道盒子的宽高

position: absolute;
left: 0; 
right: 0; 
top: 0; 
bottom: 0 
margin: auto;

方法2，需要知道盒子的宽高，margin负值往上拉

position: absolute; 
left: 50%; 
top: 50%; 
margin: -100px 0 0 -100px; 
width: 200px; 
height: 200px;

方法3，不需要知道盒子宽高

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

多行文本溢出省略效果，考虑兼容性

单行：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;

兼容：

p{
  position: relative; 
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
}
p::after{
  content: "..."; 
  position: absolute; 
  bottom: 0; 
  right: 0; 
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}