首页 > 代码库 > CSS中清楚浮动的几种方法

CSS中清楚浮动的几种方法

2024-09-04 15:05:14   223人阅读

清除浮动的几种方法

2017-02-16  19:03:17

　　当某元素的子元素设置浮动时，该元素就会产生塌陷，无法自适应高度。这种情况的出现严重影响了网页排版，因此我们必须要清除浮动来避免浮动溢出，父元素塌陷的发生。以下有几种清除浮动的方法：
 
方法和描述 代码示范 优弊
一、浮动后在结尾加一个空的标签（如：<div>、<p>等），设置属性clear:both;
这样可以让父级元素自动获得高度
 
<!-----HTML代码---->
<div>
　<div class=‘fl‘>左浮动</div>
　<div class=‘fr‘>右浮动</div>
　<div class=‘clear‘></div>
</div>
/*********CSS代码**********/
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
优点：简单、代码少，浏览器支持好，不容易出现怪问题
缺点：增加了空标签，会影响浏览器的解析速度
二、给设置浮动的元素的父级元素添加overflow CSS属性，属性设置为hidden或者auto 
1 <!-----HTML代码---->
2 <div class=‘clear‘ >
3 <div class=‘fl‘>左浮动</div>
4 <div class=‘fr‘>右浮动</div>
5 </div>
1 /***********CSS代码***********/
2 .fl{float:left;}
3 .fr{float:right;}
4 .clear{
5 overflow:hidden;
6 zoom:1; /*兼容IE浏览器*/
7 }
8 /***.clear{overflow:auto;}****/
优点：代码少，容易上手，浏览器支持好
缺点：不能和position属性配合使用。同时使用position会出现以下情况：如果是使用hidden清除浮动，超出的部分会被隐藏；如果使用auto清除浮动，子元素的尺寸过大时会出现滚动条
三、使用为元素:after来清除浮动，如右边案例所示，表示在clear类的div元素后插入内容，并设置该内容的样式 
1 <!-----HTML代码---->
2 <div class=‘clear‘ >
3 <div class=‘fl‘>左浮动</div>
4 <div class=‘fr‘>右浮动</div>
5 </div>
6  
 1 /***********CSS代码***********/
 2 .fl{float:left;}
 3 .fr{float:right;}
 4 .clear:after{
 5 content:‘.‘;
 6 display:disblock;
 7 width:0;
 8 height:0;
 9 visibility:hidden;
10 clear:both;
11 }
12 .clear{
13 zoom:1; /*兼容IE浏览器,触发hasLayout*/
14 }
优点：浏览器支持好，不容易出现一些意想不到的问题，大型网站如新浪、网易等都有使用这个方法
缺点：代码较多，初学者相对其他方式不容易掌握
四、float-in-float，将父级元素和子元素都设置浮动，并在与父级元素同级的下一个相邻元素中设置clear:both; 
1 <!-----HTML代码---->
2 <div class=‘clear‘ >
3 <div class=‘fl‘>左浮动</div>
4 <div class=‘fr‘>右浮动</div>
5 </div>
6 <div class=‘cnt‘>content</div>
7  
1 /***********CSS代码***********/
2 .fl{float:left;}
3 .fr{float:right;}
4 .clear{
5 float:left;
6 }
7 .cnt{
8 clear:both;
9 }
 缺点：可能会出现新的浮动问题

建议：伪元素清除浮动应用于网页主体排版，overflow清除浮动应用于网页中具体内容的一些小模块；但是有时候要具体情况具体分析，能达到想要的效果就是好方法！

CSS中清楚浮动的几种方法


联系
我们