CSS 清浮动详解

什么是浮动？

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的元素停下来。（脱离文档流：此时浮动元素在文档中不占位置，飘了起来）

浮动的特征

1.块元素在一行显示
2.内联元素支持宽高
3.默认内容撑开宽度
4.脱离文档流
5.提升层级半层（只能够放元素本身，这个元素里的内容会被挤出来）
6.父元素的高度无法被撑开，影响与父元素同级的元素
7.与浮动元素同级的非浮动元素（内联元素）会跟随其后
8.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的方法

after 伪类清浮动（主流方法）给浮动元素的父级添加

.clear{*zoom:1}
.clear:after{content:'';display:block;clear:both;}

overflow:hidden/auto 清除浮动 给父级元素添加

问题：需要配合宽度或者 zoom:1 兼容 IE6

给父级元素加高

问题：扩展性不好

父级浮动

问题：页面中所有的元素都加浮动，margin 左右自动失效

给父级加 inline-block

问题：margin 左右都失效

空标签请浮动

//在浮动元素下添加
<div class="clear"></div>

//然后设置样式为
.clear{height:0;font-size:0;clear:both;}

问题：在 IE6 下高度小于 19px 的元素，会被当做 19px 来处理，可以使用 font-size:0; 来解决，但是只能处理最小 2px 的高度，再小就处理不了了。

br 清浮动

//在浮动元素下加
<br clear="all"/>

问题：不符合工作中结构、行为、样式分离的要求