清除浮动的方法
1、额外标签法(隔墙法):
在浮动元素末尾添加一个空的标签,例如
<div style="clear: both"></div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
⚠️:新添加的标签必须为块级元素
2、父级添加overflow属性
给父元素添加样式
overflow: hidden;
优点:代码简洁
缺点:无法显示溢出的部分
3、父级添加after伪元素
after是额外标签法的升级版,也是给父元素添加标签
.clear_fix: after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear_fix{
/* 兼容IE6、7 */
*zoom: 1;
}
优点:没有增加标签、结构简单
缺点:需要照顾低版本浏览器
代表网站:百度、网易、淘宝等
4、父级添加双伪元素
也是给父元素添加
.clear_fix:before,
.clear_fix:after {
content: "";
display: table;
}
.clear_fix:after {
clear: both;
}
.clear_fix {
*zoom: 1;
}
优点:代码更简洁
缺点:照顾低版本浏览器
代表网站:腾讯、小米等