css 清除浮动的方法

最新推荐文章于 2022-07-25 22:31:29 发布

泛泛之辈Leo

最新推荐文章于 2022-07-25 22:31:29 发布

阅读量405

点赞数

1. 在浮动层下，设置空DIV，代码如下：

<div style="width: 160px; border: 1px solid #333; padding: 10px;">
<div style="width: 120px; height: 140px; background: #eee; float: left; "></div>
<div style=" clear: both; height: 0; font-size: 1px;"></div>

</div>

2. 在父级设置：overflow: hidden;

<div style="width: 160px; border: 1px solid #333; padding: 10px; overflow: hidden;">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
</div>

3. 在父级设置：float

<div style="width: 160px; border: 1px solid #333; padding: 10px; float: left;">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
</div>

4. 给父级加上这行吧：
.clear:after { content: '\20'; clear: both; display: block; }

<style>
.clear:after { content: '\20'; clear: both; display: block; }
</style>

<div style="width: 160px; border: 1px solid #333; padding: 10px;" class="clear">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
</div>

5. 给浮动层下设置：<br clear="all" />

<div style="width: 160px; border: 1px solid #333; padding: 10px;">
<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>
<br clear="all" />
</div>

常用清楚浮动方法
.clearfix:after {
        content: ".";
        display: block;
        clear: both;
        overflow:hiddden;
        visibility: hidden;
        height: 0;
}

.clearfix {
        display: inline-block;
}

* html .clearfix {
        height: 1%;
}