今天小编跟大家讲解下有关浅谈CSS 高度塌陷问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈CSS 高度塌陷问题 的相关资料，希望小伙伴们看了有所帮助。
表现
例如：
HTML：
<div class="first"> <div class="first-child1">first-child1</div> <div class="first-child2">first-child2</div></div><div class="second"> second</div><div class="third"> third</div>CSS：
.first{ width: 300px; background-color: pink;}.first .first-child1,.first .first-child2{ float: left; width: 100px; height: 100px;}.first .first-child1{ background-color: purple; margin-right: 10px;}.first .first-child2{ background-color: red; }.second{ width: 200px; height: 150px; background-color: blue;}.third{ width: 100px; height: 150px; background-color: green;}表现为：
产生的原因
由上面的例子可以看出 first盒子没有设置高度 由子元素撑开 但是由于子盒子设置了浮动 脱离了标准流 所以导致first盒子没有高度 表现为second和third盒子向上移动了。
可以得出产生高度塌陷的原因：
在文档流中 父元素的高度默认是被子元素撑开的 也就是子元素多高 父元素就多高。但是当为子元素设置浮动以后 子元素会完全脱离文档流 此时将会导致子元素无法撑起父元素的高度 导致父元素的高度塌陷。由于父元素的高度塌陷了 则父元素下的所有元素都会向上移动 这样将会导致页面布局混乱。
高度塌陷的解决办法：
1、给父元素设置固定高度。但是使用这种方式后 父元素的高度就不能根据子元素自动撑高了 可以根据自己页面的特点 如果可以固定高度 可以使用这种方式 否则 不推荐这种方式。
2、额外标签法 这是w3c推荐的解决方案 但是不推荐 因为html的原则是写出语义化的标签 这种方式会额外增加无意义的标签。
<div class="first"> <div class="first-child1">first-child1</div> <div class="first-child2">first-child2</div> <div style="clear: both;"></div></div>3、父元素的overflow属性（开启元素的BFC）：
.clearfix{ overflow: hidden;}使用这种方式 属性值可以是非visible（hidden/auto/scroll）中任意 但是建议用hidden。
这种方式副作用较小 这种方式在ie6中不支持 可以外加zoom: 1;
.clearfix::after{ content: ""; display: block; height: 0; clear: both; visibility: hidden;}.clearfix{ zoom: 1;}4、单伪元素after清除浮动（开启元素的BFC）：
.clearfix::after{ content: ""; display: block; height: 0; clear: both; visibility: hidden;}.clearfix{ zoom: 1;}这种方式现在使用比较广泛 很多大网站都是使用这种方式 副作用较小 只需要在配合处理ie6就可以了。
5、双伪元素清除浮动（开启元素的BFC）：
.clearfix::before,.clearfix::after{ content: ""; display: block; clear: both;}.clearfix{ zoom: 1;}这种做法写法比较麻烦 也不推荐。
清除浮动对父元素的影响后的效果：
BFC相关
根据W3C的标准 在页面中元素都一个隐含的属性叫做Block Formatting Context 简称BFC 该属性可以设置打开或者关闭 默认是关闭的。
当开启元素的BFC以后 元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
