浮动元素脱离文档流,就无法撑起父元素,会造成父元素的高度塌陷
先来了解一下高度塌陷的原因
解决方法一；
空标签 clear:both(不推荐)
clear:both作用:清除两边的浮动,拥有clear:both属性的元素放在浮动元素之后,会起到清除浮动的作用
1.优点
简洁方便,通俗易懂
2.缺点
添加了一个无意义的标签,语义化比较差
**方案二； overflow:hidden(不推荐)**给父元素添加 overflow: hidden;
思路:通过触发BFC,清除浮动
1.优点
代码简洁
2.缺点
内容增多的时候,容易造成不会自动换行导致内容被隐藏掉,无法要显示溢出的元素
方案三:
after伪元素清除浮动(推荐使用)