方法一:额外标签法
给谁清除浮动,就在其后额外添加一个空白标签 ,给其设置clear:both。
优点:通俗易懂,书写方便。
缺点:添加许多无意义的标签,结构化比较差。
clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来 。
css样式
#clear{
clear: both;
}
html代码
<div id="parent">
<div id="child"></div>
<!-- 方法一 额外标签法 -->
<div id="clear"></div>
</div>
方法二:父元素添加overflow:hidden
通过触发BFC方式,实现清除浮动
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素。
css样式
#parent{
overflow: hidden;
}
方法三:使用after伪元素清除浮动
优点:符合闭合浮动思想,结构语义化正确。
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。
css样式
#parent:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
#parent{
/* 触发 hasLayout */
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
方法四:使用before和after双伪元素清除浮动
优点:代码更简洁
缺点:用zoom:1触发hasLayout.
css样式
#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
clear: both;
}
#parent{
*zoom: 1;
}
方法五:为父元素设置高度
缺点: 需要手动添加高度,如何后面的高度发生变化,还要再次修改高度,给后期的维护带来麻烦。
优点: 简单粗暴直接有效,清除了浮动带来的影响