要清除浮动啊

最近在做项目时 出现父级元素塌陷 导师问：还记得怎么做吗？一时懵住了
现总结一下

什么是父级塌陷

看上图 本来box 包裹着 item 但是item设置了float：left 。是的，就是浮动！box没有被撑起。会有什么影响呢，加入在加入一个元素，会导致接下来的元素 位置会有些偏差，比如：下图

所以 要清除浮动

现有几种方法：

1.给浮动的元素即子元素 后添加空元素 加入clear：both 属性 （无故添加空元素 结构化较差 不推荐）

2.给浮动元素的父级加overflow：hidden 属性 触发BFC模式（若该父盒子里还有position定位会引起麻烦）

3.通过设置伪类的方式 结构化好 注：给父级元素设置伪类 display：block ；clear：both ；（visibility：hidden；可以没有）

4.双伪类方式 即父级元素加before after 同样 clear：both

所以：清除完浮动后页面结构是这样的 ⬇️⬇️⬇️

我用的方法是伪类😁结构化好，可读性强，强推～～～