清除浮动的几种方法
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清除浮动应用于网页中具体内容的一些小模块;但是有时候要具体情况具体分析,能达到想要的效果就是好方法!