清除浮动的几种方法
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清除浮动应用于网页中具体内容的一些小模块；但是有时候要具体情况具体分析，能达到想要的效果就是好方法！
时间： 2024-12-17 08:08:35