HTML5-css-清浮动

清除浮动

在写页面的时候，尤其是布局的时候，会发现有些标签使用浮动布局后会对后面的标签的布局产生影响，当元素浮动的时候，会脱离父级文档流，不会撑开父级的高度，引起页面布局的混乱，因此需要清除浮动产生的影响
清除浮动的方法
1.通过测量高度，直接给父级设置具体的高度
2.给父级添加display：inline-block，也可以清除浮动(低版本ie不支持)
3.给父级添加最后一个子元素，是一个空标签，用他来清浮动，添加的样式为
clear：both;
height：0;
overflow：hidden;
因此在低版本ie下默认行高，因此需要设置行高为0
4.给父级添加 overflow：hidden; 缺点：ie7及其以下版本不能使用，父级有超出定位的元素，不能使用
5.可以给父级添加浮动，如果父级浮动则子级的浮动不用清除
6.通过after伪元素清除浮动
/* after伪元素清浮动 */

 .clearfix:after{
        clear: both;
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
        _zoom:1;
    }