清除浮动有哪几种方法,简述每种方法的实现思路_前端清除浮动的方法

清除浮动的目的：
为了解决父级元素因为子级浮动引起的内部高度为零的问题

清除浮动的方法（最常用的4种）：
1、额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
原因： 如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
2、父级添加overflow属性（父元素添加overflow:hidden）（不推荐）–>通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
3、使用after伪元素清除浮动（推荐使用）
.clearfix:after {
content: “.”;/* 内容为小点，尽量加不要为空，否则旧版本的浏览器有空隙*/
display: block;/* 转换为块元素*/
height: 0;/* 高度为零*/
visibility: hidden;/* 隐藏盒子*/
clear: both;/* 清除浮动*/
}
.clearfix {
*zoom: 1;/*兼容ie6/7*/
}
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
4、使用before和after双伪元素清除浮动(强烈推荐使用)
.clearfix:before, .clearfix:after {
content: “”;
display: table;
}
.clearfix:after {
clear: both
}
.clearfix {
*zoom: 1;/*兼容ie6/7*/
}
优点：代码更简洁
缺点：用zoom:1触发hasLayout.

今天的文章清除浮动有哪几种方法,简述每种方法的实现思路_前端清除浮动的方法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。