什么是高度塌陷？

当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。

父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们要解决高度塌陷的问题。

如下代码：

<div class="box"><div class="div1">div1</div><div class="div2">div2</div>
</div>

.box{border: 5px solid red;}
.div1{height: 100px; width: 100px; background: green;}
.div2{height: 100px; width: 100px; background: blue;}

当我们让div1和div浮动之后:

.div1{height: 100px; width: 100px; background: green; float: left;}
.div2{height: 100px; width: 100px; background: blue; float: right;}

我们可以发现，当子元素全都浮动后，父元素box的高度变为了0只剩下了边框，这就是box发生了高度塌陷。

如何解决高度塌陷？

一、解决高度塌陷最直接的办法就是给父元素添加高度

优点：简单。

缺点：只适合固定页面的布局，无法进行自适应，不推荐使用。

二、触发BFC

BFC即 Block Formatting Contexts (块级格式化上下文)，是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC有一个特性是计算BFC的高度时，浮动元素也参与计算，所以将box出发为BFC后可以解决高度塌陷。可以通过给box添加overflow: hidden;等声明触发BFC。

.box{border: 5px solid red; overflow: hidden;}

如图所示：box又被子元素给撑开

触发BFC的方法：

根元素；html标签就是一个BFC。
float的值不为none；让父元素浮动起来，这种方式开启虽然可以解决父元素的高度塌陷问题，但父元素也会浮动，可能引起其他布局问题。
display的值为inling-block/table-cell/table-caption/flex/inline-flex；
overflow: auto/hidden/scroll (不为visible)
position的值为absolute或fixed；

注意：IE6及以下的浏览器不支持BFC，所以通过触发BFC来解决高度塌陷不能兼容IE6及以下浏览器。在IE6中可以通过设置声明zoom:1;来触发hasLayout来解决高度塌陷问题。

BFC的使用场景：

1. 去除边距重叠现象

2. 清除浮动（让父元素的高度包含子浮动元素）

3. 避免某元素被浮动元素覆盖

4. 避免多列布局由于宽度计算四舍五入而自动换行

三、给所有的浮动元素后面(即div2后)加一个空的标签。给添加的这个空标签添加声明 clear: both; 。

可以再加上height: 0; overflow: hieedn;是为了避免这个空标签如果是li的话，在IE6和IE7. 上有默认高度撑着，所以要解决一下。)

<div class="box"><div class="div1">div1</div><div class="div2">div2</div><div style="clear: both; overflow: hieedn;"></div>
</div>

四、万能清除法：给高度塌陷的元素添加如下after伪类

.box::after{content: '';clear: both;/*清除两侧浮动*/display: block;/*转成成一个块元素*/both; overflow: hidden;visibility: hidden;
}

::after对IE8以下有兼容问题，可以通过增加zoom: 1;声明来解决。

高度塌陷的产生原因及解决方法相关推荐

[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
基于继承类的属性模版中无法绑定的原因和解决方法
原文:基于继承类的属性模版中无法绑定的原因和解决方法这个的晚上想学学WPF 做一个类似于ERP 左边菜单.构思一下思路 ...... 创建一个类基于Expander类. 1 public class ...
php垂直对齐,CSS垂直对齐不起作用的原因及解决方法
verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因我想很多人都会 ...
浏览器打开html文件特别慢,打开浏览器速度缓慢的原因及解决方法
不少用户都会遇到打开浏览器速度缓慢的问题,有时候双击浏览器后,半天没出现页面,出现页面后也是一片空白.对于这种情况,该如何去解决呢?下面学习啦小编就为大家介绍一下具体的原因及解决方法吧,欢迎大家参考和 ...
html不兼容的原因,浏览器不兼容的原因和解决方法
浏览器之间不兼容的原因和解决方案网页设计中最大的麻烦之一是网页与不同浏览器的兼容性,这是因为主流浏览器(例如IE 6.0 / IE 7.0 / firefox 2 / Opera 9)无法进行CSS解 ...
探讨Docker不能启动容器的原因和解决方法
Docker是一种虚拟化容器技术,能够提供一种快速.高效.可靠的容器化解决方案,广泛应用于云计算.大数据.微服务架构等场景.但是,有时候在使用Docker的过程中,我们会遇到一些问题,比如容器不能启动 ...
内存溢出和内存泄漏的定义，产生原因以及解决方法（面试经验总结）
一.定义(概念与区别) 内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存 ...
dos系统不能安装python模块,无法使用pip命令安装python第三方库的原因及解决方法...
再dos中无法使用pip,命令主要是没有发现这个命令.我们先找到这个命令的位置,一般是在python里面的scripts文件夹里面.我们可以把dos切换到对应的文件夹,再使用pip命令就可以了. 如果 ...
xp路由器播放服务器无响应,xp系统连不上路由器的原因及解决方法
路由器是互联网络的枢纽,"交通警察,在生活和办公中都随处可见了.在笔记本xp系统中遇到连不上路由器的问题,这样就没办法上网了,怎么回事呢?一是软件原因,二是硬件原因,遇到xp系统连不上路由器 ...

高度塌陷的产生原因及解决方法