一.浮动带来的影响
子元素浮动之后会导致父元素塌陷,影响后面的布局
二.解决
1.固定高度:给浮动的父元素设置固定高度
优点:代码简洁 缺点:不够灵活
2.overflow方法:给父元素添加overflow:hidden;属性,不为visible(默认值),为hidden,scroll,auto任何一个都可以
优点:代码简洁 缺点:可能会触发不需要的滚动条或隐藏内容
3.额外标签法:在浮动元素的最后加一个空的块级元素,此元素本身不浮动,并且给元素添加清除浮动属性:clear属性
.box{
clear:left;(清除左浮动)
clear:right(清除右浮动)
clear:both(两者都清除)
}
<div class="box"></div>
4.伪元素法:clearfix::after{content:""; 为伪元素添加内容(默认行级标签)
display:block; 转为块级元素
clear:both; 清除两侧浮动
}
给浮动元素的父元素添加clearfix