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