关于浮动元素float使其父元素高度塌陷的缘由及解决方法

浮动元素使其父元素高度塌陷

咱们常常会遇到一种状况，给一个元素设置浮动以后 float:left/right;，若是该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；若是父元素有一个边框，那么浮动元素没法将边框撑开。

这就要回到浮动元素的特性来讲明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它以前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认本身里面没有任何内容（前提是未给父元素设置固定高度，若是父元素自己有固定高度，就不会出现这种状况）

解决方法：

一、给父元素也添加float。这样让父元素与子元素一块儿脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，可是此方法有一弊端，必定会影响父元素以后的元素排列，甚至影响布局。
二、给父元素一个固定高度，此方法适用于子元素高度已知而且固定的状况。
三、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早以前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增长了无心义的标签，一个大型页面中，这种标签太可能是很差的。
四、给父元素添加 overflow：hidden；【后有详解】
五、经过伪类::after清除浮动 【后有详解】

overflow:hidden;

隐藏溢出，当内容超过其父元素时，可使用该属性和值将溢出的部分裁剪掉，使页面更加美观
清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，可是由于子元素有浮动，没法裁剪，全部只能由父元素增长高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
::after 伪类

利用伪类来清楚浮动，其效果跟建立一个空的div并设置其为clear：both；是同样的，只不过这里用伪类代替了空的div元素
<div class="box">
<div class="son">我是浮动的子元素</div>
</div>
1
2
3
.box {
width:400px;
background:#F00;
}
.son {
float:left;
}
.son::after {
content:"";
clear:both;/*清除浮动*/
display:block;/*确保该元素是一个块级元素*/
}
————————————————

原文连接：https://blog.csdn.net/chris_z_0622/article/details/65442975