float浮动:会脱离标准流,影响:1. 不保留原位置,因此父元素不设置高度则无法被撑大
2. 同级元素应该也浮动,否则布局可能会出现问题
清除浮动方法:
1. W3C推荐做法:在浮动元素最后添加一个块级标签,css样式设置clear: both;
兼容性好,但每次都会多添加一个块级标签,影响代码结构
2. 伪元素:在浮动元素父元素中添加一个伪元素after
.clearfix:after {
content: '';
display: block;
visibility: hidden;
clear: both;
}
3. 双伪元素,在伪元素的基础上添加一个:before伪元素
4. overflow: hidden; 本质是构建了一个BFC,但缺点是可能会把超出盒子范围的样式隐藏起来
注:参考https://juejin.cn/post/6948227795059212318#heading-22