-
给父元素添加overflow: hidden;(一般不使用)
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素 -
在最后一个浮动元素后面再加一个标签,对新加的标签添加样式clear: both,来清除浮动对页面的印象(不推荐)
优点:通俗易懂,方便
缺点:添加无意义标签,语义化差
-
使用after伪元素清除浮动 (推荐使用)
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/ }
<div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> </div>
优点:符合闭合浮动思想,结构语义化正确
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.
- 使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; }
<div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> </div>
优点:代码更简洁缺点:用zoom:1触发hasLayout.
清除浮动的方式以及优缺点
最新推荐文章于 2023-01-06 21:49:27 发布