我们在进行页面布局的时候可以发现元素在脱离文档流后，就会出现高度塌陷问题。 众所周知高度塌陷的原因是因为子元素脱离文档流所造成的父元素塌陷（所谓的高度塌陷就是子元素和父元素不在一个层级，未设置高宽的父元素里面没有子元素的支撑就会塌陷）会影响页面布局和美观性。 以下提出几点解决方案 首先我们先 ...

什么是高度塌陷？ 父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。 如何来解决高度塌陷？ 方案一：给父元素一个固定的高度 缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。 方案二：给父元素添加属性 overflow ...

如果父元素只包含浮动元素，且父元素未设置高度和宽度，那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”。 如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。 解决“高度塌陷”问题的方法： 1.浮动父级元素，父级元素的高度就会扩大，直到完全包含它里面的浮动元素。如果使用这种方法 ...

解决高度塌陷问题的方法： 方法一、 方法二、 方法三、 ...

问题的产生 文档流中父元素高度默认由子元素撑开 代码： 效果： 为子元素添加浮动后，子元素脱离文档流，无法撑起父元素，导致父元素高度塌陷 清除浮动的方法 第一种：开启BFC 根据W3C的标准，在页面中元素都有一个隐含的属性 Block ...

浮动元素使其父元素高度塌陷 我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离 ...

　　hello 朋友们，我又来了哦！对的没错，今天的话题呢就是高度塌陷。 　　首先要知道什么是高度塌陷。高度塌陷其实就是指当父元素没有给确定的高度（即父元素高度靠子元素撑起来），并且子元素添加了浮动时，内容无法撑起父元素的高度，即父元素发生高度塌陷。 　　解决办法： 　　　　第一种，开启元素 ...

摘自：https://www.cnblogs.com/fuck1/p/7441327.html ...