CSS float和清除浮动

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来（左右浮动）。

高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

结论：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！

为什么要清除浮动？

浮动会在造成高度欺诈，让父元素误认为浮动元素高度为0（自身高度并没有改变），而导致父元素自身高度为0，所以为了使父元素高度正常显示需要清除浮动。

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