css清除浮动的几种常用方式

Daming 2018-04-26
0条评论 1,041 次浏览
Daming 2018-04-260条评论 1,041 次浏览

在浮动元素后面添加 clear:both 的空 div 元素,

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>

给父元素添加 overflow:hidden 或者 auto 样式,(利用bfc,参考:http://www.crazyming.com/note/1653/)

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
.container{
    width: 300px;
    background-color: #aaa;
    overflow:hidden;
    zoom:1;   /*IE6*/
}

使用伪元素,也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
.clearfix{
    zoom: 1; /*IE6*/
}
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

1+

发表评论

电子邮件地址不会被公开。