CSS中清除浮动的几种方法

来源：懂视网责编：小采时间：2020-11-27 18:52:11

CSS中清除浮动的几种方法

CSS中清除浮动的几种方法:一、clear:both;这种方法有一个问题：margin失效。二、隔墙法 /*墙*/ </

推荐度：

点击下载本文 文档为doc格式

导读CSS中清除浮动的几种方法:一、clear:both;这种方法有一个问题：margin失效。二、隔墙法 /*墙*/ </

一、clear:both;

这种方法有一个问题：margin失效。

二、隔墙法

 <p class="box1">
 </p>
 <p class="cl hl"></p> /*墙*/
 <p class="box2">
 </p>

 cl{
 clear: both;
 }
 .hl{
 height: 16px;
 }

演化出的“内墙法”

<p>
 <p></p>
 <p></p> /*两个p都浮动，所以p不会被撑出高*/
 <p class="cl"></p> /*在家里建一堵墙就能让儿子给p撑出高*/
</p>

注意：一般不使用此方法，会增加页面标签。

三、overflow:hidden;

本意就是清除溢出到盒子外面的文字。但是，它能作为偏方来清除浮动。
注意：一般不使用此方法，因为溢出这个元素所在的区域会被隐藏。

四、使用伪元素

.clearfix:after {
 　　　　content: '';
 　　　　 height: 0;
 　　　　 line-height: 0; /*或 overflow:hidden*/
 　　　　display: block;
 　　　　visibility: hidden;
 　　　　clear: both;
　　　　}
　　　　.clearfix {
 　　　　 zoom: 1; /*兼容ie6*/
　　　　}

五、双伪元素标签

页面上不存在的元素可以通过css添加上去，每个元素都有自己的伪元素。

　　　　.clearfix:before,.clearfix:after {
 　　　　 content: '';
 　　　　 display: table;
　　　　}
　　　　.clearfix:after {
 　　　　clear: both;
　　　　}
　　　　.clearfix {
 　　　　 zoom: 1;
　　　　}

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com