CSS浮动并清除浮动(造成的影响)

一、浮动
CSS浮动 CSS float浮动的深入研究、详解及拓展(一) CSS浮动属性Float详解

块级元素独占一行
块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

注意，以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

浮动
浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

显然标准流已经无法满足需求，这就要用到浮动。 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

重要结论：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变(因为标准流中的块级元素是独占一行的)，也就是说A的顶部总是和上一个元素的底部对齐。

可以看出：
元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

二、清除浮动（造成的影响）
清除浮动可以理解为打破横向排列。

清除浮动其实就一个目的，就是解决高度塌陷的问题。

为什么会高度塌陷？什么时候会高度塌陷？塌陷原因是：元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。

什么时候会塌陷：当标签里面的元素没有实际高度时会塌陷。

清除浮动：
3.1 添加额外标签

浮动