CSS基础之高度塌陷的三种解决方案

项目场景：

相信很多小伙伴初学浮动，在页面布局的时候可能会出现这种现象，父元素身上没有设置高度，想让子元素撑起父元素，而给子元素添加浮动属性之后，父元素的高度为0的情况。

---

问题描述

高度塌陷：父元素没有设置高度，子元素浮动导致父元素高度受影响

---

原因分析：

这种情况是因为，给子元素添加浮动属性之后，子元素脱离文档流，不再占据位置，所以无法撑起父元素导致。快来看看以下的解决方案吧~

---

解决方案：

一、给出现高度塌陷的元素触发BFC（写overflow：hidden）

优点：简单

缺点：如果有一个元素定位到了大盒子外边，呢么这个元素就会被隐藏

二、隔墙法：给所有的浮动元素的后面创建一个空的div标签，写一个行内样式： clear：both；

优点：简单

缺点：会造成html代码冗余

三、万能清除法：（css）

.clear_fix::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    clear: both;
}