CSS中盒⼦塌陷（浮动、定位）如何应对
在HTML布局中，经常会⽤到浮动 float 浮动 和 position 定位。在⽗盒⼦没有固定⾼度时，⽤浮动和定位，float和position:abslote 属性都会将元素从不标准⽂档流中抽出。其中浮动：⽗盒⼦只包裹没有浮动的内容，浮动的盒⼦⽆法撑起⽗盒⼦⾼度导致坍塌、定位：绝对定位的盒⼦不占空间导致坍塌。
解决⽗盒⼦坍塌：
⼀、浮动
1、固定⾼度：给⽗盒⼦设置固定⾼度
缺点：设置固定⾼度后页⾯的灵活性会降低，后期更改⼦盒⼦元素时⽐较⿇烦
2、overflow ：给⽗盒⼦添加 overflow 属性，其中 auto（如果内容过多，出现滚动条） hidden scroll（会直接出现滚动条）都可以解决
3、空盒⼦：⽗盒⼦最下⽅写⼀个带有clear属性的空盒⼦例如：<div ></div>
或者直接<br >css固定定位
缺点：引⼊了冗余元素（多余的元素）
4、⽗盒⼦浮动：给⽗盒⼦设置 float 浮动 ，可以理解为⼦盒⼦丢了，⽗盒⼦去⼦盒⼦
缺点：页⾯灵活性太差，会影响整个页⾯的布局、可读性差，难以理解⽗盒⼦为什么浮动
5、伪元素：通过：after 伪元素添加 clear 清除浮动
6、通过JavaScript：不设置固定⾼度是为了⽗盒⼦由⾥⾯内容撑开，使后期修改更新⽅便。这⾥我们可以通过 JavaScript 获取浮动⼦盒⼦⾼度，使⽗盒⼦⾼度等于⼦盒⼦⾼度
⼆、定位
定位造成的坍塌只能通过 设置固定⾼度 和 通过JavaScript获取绝对定位⼦盒⼦⾼度，使其相等 来解决坍塌问题。使⽤⽅法与解决浮动相同

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。