css 高度塌陷_HTML 元素高度塌陷及解决办法

首先了解下什么是高度塌陷

作为前端开发者都知道，在HTML 中父元素在没有设置高度的时候，其默认高度是会被子元素撑开的，也就是子元素有多高，父元素就有多高，但当其所有子节点都浮动的时候，就会脱离文档流，此时父元素的高度就会丢失。如果在没有设置边框属性的情况下是比较难发现的，并会影响使布局变得混乱，达不到预期布局。

如上结构在class="parent" 的子元素没有设置浮动时的效果预期应该是如下所示的：

Screen Shot 2019-03-17 at 10.13.25 AM.png

此时父元素的高度是等于三个子结点撑开的高度。

当给class=“parent”的三个子div设置了float: left的时候，如下图所示，出现了页面布局混乱，而class="parent"的这个父div的height变成了0，它里面的三个子div是浮动排列的，而class="other"的这个div“跑到”它上面的元素的位置上去了，就好像它上面的元素都并不存在似的，这个就是“高度塌陷”问题了 。

Screen Shot 2019-03-17 at 10.21.35 AM.png

解决办法

想达到如下图所示的布局效果：

Screen Shot 2019-03-17 at 10.31.55 AM.png

1. 方法一

在class=“parent”元素内添加一个空的DIV标签，并设置如下CSS

.clear {

clear: both;

}

缺点: 增加了无意义的标签。

2. 方法二

让父元素本身也浮动

缺点: 虽然可以撑开父元素，但会使父元素宽度丢失，而且导致下面的元素会上移，使与父元素相邻元素的布局受到影响。

3. 方法三

通过给父元素添加:after伪类， 最推荐的方法

给父元素添加如下CSS样式

.parent:after {

content: "."; /*生成内容作为最后一个元素，至于content里面是什么没有影响*/

display: block; /*使生成的元素以块级元素显示，占满剩余空间*/

height: 0; /*避免生成的内容破坏原有空间的高度*/

clear: both; /*闭合浮动*/

visibility: hidden; /*使生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/

}

利用伪类来清除浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素，不会影响任何其他样式，通用性强，覆盖面广。