一、定义和用法
float 属性定义元素在哪个方向浮动,浮动元素会生成一个块级框,而不论它本身是何种元素,并且它们会尽可能地窄。
二、清除浮动
1. 在浮动元素后增加一个块级元素,并设置 CSS 的 clear 属性为 both,比如:<div style="clear: both;"></div>。
2. 给浮动元素的容器添加 overflow: hidden; 或 overflow: auto; 。另外在 IE6 中还需要触发 hasLayout,例如为父元素设置容器宽高或设置 zoom: 1。
3. 给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
4. 给浮动元素的容器添加一个 clearfix 的类,然后给这个类添加一个 :after 伪元素实现元素末尾添加一个看不见的块元素清理浮动。
.clearfix {
zoom: 1;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}