《CSS in depth》第四章

改变文档流的方式有3种，浮动、flexbox、网格系统。

浮动的初衷是，为了把某个元素拉到其所在容器的一边，并脱离文档流。

子元素设置浮动时，高度不会加到父容器的高度里，所以上图中，Running tips的白色背景不会延伸到页面下方。解决方案：

给main元素增加一个clear样式来清除浮动

.clearfix::after {
    clear: both;
    display: block;
    content: " ";
}

display属性也可以设置为table, 可以阻止外边距被折叠。

BFC：block formatting context, 块级格式化上下文。作用是隔离内部的内容与外部的上下文。做了几件事：1. 包含内部所有元素的上下margin, 不会跟BFC外面的元素产生外边距折叠；2. 包含了内部所有的浮动元素；3. 不会跟BFC外面的浮动元素重叠。BFC可以通过如下的几种方式创建：1. float不为None,2. overflow不为visible, 3. display为inline-block, table-cell, table-caption, flex, inline-flex, grid或者inline-grid. 块级容器，4. position为absolute或者fixed.

demo地址为xiaok1988.com.cn/demos/2.html