浮动的基础作用
就是让文本环绕图片。
包裹性
设置了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.两列布局
左右结构