首先了解下什么是高度塌陷
- 作为前端开发者都知道，在HTML 中父元素在没有设置高度的时候，其默认高度是会被子元素撑开的，也就是子元素有多高，父元素就有多高，但当其所有子节点都浮动的时候，就会脱离文档流，此时父元素的高度就会丢失。如果在没有设置边框属性的情况下是比较难发现的，并会影响使布局变得混乱，达不到预期布局。
<body>
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="child child3"></div>
</div>
<div class="other"></div>
</body>
如上结构在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元素，不会影响任何其他样式，通用性强，覆盖面广。
网友评论