浮动导致塌陷/清楚浮动

未添加浮动，背景有颜色


添加浮动，背景色没了
再为父元素添加一个边框
可以看到，父元素并没有被撑开

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

解决方法：

1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。

2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。（子元素仍然是浮动着的，）

3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。

未清除浮动的时候


为3添加clear:both属性后（不允许有浮动的对象）

4、给父元素添加 overflow：hidden；
overflow:hidden;

隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
同级元素和包含状态的元素浮动状态有差别，overhiiden适合父元素包裹子元素，这样父元素设置属性后，会拥有子元素的高度

5、通过伪类::after清除浮动

::after 伪类
利用伪类来清楚浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素



这个用的比较广泛