大家好，欢迎来到IT知识分享网。
清除浮动的目的：
为了解决父级元素因为子级浮动引起的内部高度为零的问题
清除浮动的方法（最常用的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.
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30269.html
