float以及清除

浮动的基础作用
就是让文本环绕图片。

包裹性
设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。display样式是没有变化的，还是block。

破坏性
使用float的图片会无法与文字在同一行显示，并且高度为0，所以会造成父元素高度的塌陷，因此就要清除浮动。
浮动元素和绝对定位元素相比，区别在于绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中。

清除float
1. overflow：hidden + zoom方法
要注意overflow：hidden，如果里面的元素要是想来个margin负值定位或是负的绝对定位，会被直接被裁掉。
2.伪元素
.clearfix:after {
display: block;
content: ’ ‘;
clear: both;
line-height: 0;
visibility: hidden;
}

推荐使用这个方法，不会影响其他样式，通用性强，覆盖面广。

合理使用float进行页面布局
1.三列布局
经典的左中右

2.两列布局
左右结构