给没有浮动的元素添加clear:both,就会清除元素两边的浮动效果(没有被该元素clear:both的清除的区域,依然会有浮动效果),不浮动的元素以前被浮动覆盖的区域就会脱离浮动元素的·覆盖,紧贴浮动元素下方布局。父元素会被撑开。
.clearfix::after{
content: "";
display: block;
clear: both;
}
给父元素(没有设置高度)添加类clearfix ,父元素里面的浮动效果就会被清除,此时父元素的高度就是浮动元素的高度,如果父元素里有没float的元素,则浮动的元素依然会覆盖不浮动的元素,可以为不浮动的元素添加clear:both