CSS 中盒子塌陷（浮动、定位）如何应对

 在HTML布局中，经常会用到浮动 float 浮动 和 position 定位。在父盒子没有固定高度时，用浮动和定位，float和position:abslote 属性都会将元素从不标准文档流中抽出。其中浮动：父盒子只包裹没有浮动的内容，浮动的盒子无法撑起父盒子高度导致坍塌、定位：绝对定位的盒子不占空间导致坍塌。

解决父盒子坍塌：

一、浮动

1、固定高度：给父盒子设置固定高度

缺点：设置固定高度后页面的灵活性会降低，后期更改子盒子元素时比较麻烦

2、overflow ：给父盒子添加 overflow 属性，其中 auto（如果内容过多，出现滚动条） hidden scroll（会直接出现滚动条）都可以解决

3、空盒子：父盒子最下方写一个带有clear属性的空盒子例如：<div style="clear: both;"></div>

或者直接<br style="clear:both;">

缺点：引入了冗余元素（多余的元素）

4、父盒子浮动：给父盒子设置 float 浮动 ，可以理解为子盒子丢了，父盒子去找子盒子

缺点：页面灵活性太差，会影响整个页面的布局、可读性差，难以理解父盒子为什么浮动

5、伪元素：通过：after 伪元素添加 clear 清除浮动

6、通过JavaScript：不设置固定高度是为了父盒子由里面内容撑开，使后期修改更新方便。这里我们可以通过 JavaScript 获取浮动子盒子高度，使父盒子高度等于子盒子高度

二、定位

定位造成的坍塌只能通过 设置固定高度 和 通过JavaScript获取绝对定位子盒子高度，使其相等 来解决坍塌问题。使用方法与解决浮动相同