1.2 float布局-深度解析-refer to 《CSS in Depth》

若是说网页的信息在html，那网页的灵魂就在css文件对网页的布局了。

float

float是最先出现的，专为插图准备的样式。它的诞生就决定了它受用范围的限制，而咱们用它的行为特色对页面进行布局，也会出现不少的奇奇怪怪的毛病。接下来谈一下float的特色。

1.浮动

对元素设置 float: left; 以后，元素会脱离文档流，display会失效，在文档流中表现为一个空字符""。但它又确确实实存在，在文档中又能看到，也会对文字进行影响。文字会紧挨着float元素，就像word里面的图片环绕，不管放哪，文字都会跟着动态包裹。

取值为 float: left | right ; 由于它像空字符"",又确实存在并同时对文字进行影响，伴随了不少毛病与修补。

1.1 脱离文档

若是一个普通元素的子元素都是float，不注意的时候会发现 background-color 没有像所想的那样布置颜色，浏览器检查就看出实际上是元素没有内容。

1.2 突破界限

若是相邻元素有文字，就会发现 float元素 直接对相邻元素文档流进行干扰，从新排列。

其实这个特色在书本格式中仍是挺好用的。

1.3 奇怪排列

多个会依次按顺序堆积，当到下一列的时候就出现问题了。

它不会按照你的逻辑来，而是选择位置高的地方堆积。

2.补丁

因为 float 有这么多臭毛病，因而对他打了几个补丁：clear、BFC

2.1 清除浮动

在子元素末尾添加 clear: both; 这个末尾元素必须为块级元素 block ，而后他的位置就会被固定到末尾，与 float 一块儿排列，并出如今文档流中，因为本事内容为空，就像是float元素本身进行填充。
clear: both ，能够在html中进行插入，但不够优雅，因此用伪元素 ::after

2.2 按行排列

在特定的每行的行首元素设置 clear: left ，可使用伪类如 nth-child(3n+1) 。

2.3 BFC

BFC( block formatting context )，说的是作出一个元素，这个元素，不准本身的 float元素 出去，也不准外面的 float元素 进来，也不让内 margin 突破出来。
能达到这个要求的包括:

1. float(除了none) 本身
2. overflow(除了visible)
3. display: inline-block | table-cell | table-caption | flex | inline-flex | grid | inline-grid(这些叫作块级限制)
4. position: absolute | fixed

根元素自己也是顶级BFC

能够说，clear 与 BFC 就是针对float的补丁。