html高度塌陷问题

高度塌陷

一般情况下，我们不会给父元素设置指定的高度，都是让他被内容撑开的。如果我们给子元素设置浮动，子元素会脱离文档流。一旦元素脱离文档流了，子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致页面布局混乱，这就叫高度塌陷。

解决高度塌陷方法一

给父元素设置固定高度,但这种方式不推荐使用

<style type="text/css">.outer {border: 10px red solid;height: 100px;}.inner {width: 100px;height: 100px;background-color: blue;float: left;}.box3 {height: 100px;background-color: yellow;}</style></head><body><div class="outer"><div class="inner"></div></div><div class="box3"></div></body>

解决高度塌陷方法二

给元素开启隐含属性BFC（块级格式化上下文），一旦元素开启隐含属性BFC后
元素就具有一些独有的特点，这些特点可以解决一些问题，其中就包括高度塌陷
1、开启BFC后，元素具有哪些特点？
（1）、父子外边距就不会重叠了（解决父子外边距重叠的问题）
（2）、开启BFC的元素就不会被浮动元素所覆盖
（3）、开启BFC的元素可以包裹住浮动的元素（解决高度塌陷问题）

2、如何开启BFC属性
（1）、设置overflow样式，样式值只要是非visible
也就是说可以设置hideen，auto，scroll等
其中hideen是副作用最小（推荐使用）
（2）、设置元素浮动(不推荐)
确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，
页面布局依然会混乱，而且父元素的宽度也会丢失
（3）、将元素转成行内块元素(不推荐)
可以解决父元素高度丢失的问题，但也带来一些新问题，父元素的宽度丢失了，
而且三像素也出现
（4）、将元素设置绝对定位 position: absolute;(不推荐)
确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，
页面布局依然会混乱，而且父元素的宽度也会丢失

<style type="text/css">.outer {border: 10px red solid;height: 100px;/* 开启BFC */overflow: scroll;display: inline-block;position: absolute;}.inner {width: 100px;height: 100px;background-color: blue;float: left;}.box3 {height: 100px;background-color: yellow;}</style></head><body><div class="outer"><div class="inner"></div></div><div class="box3"></div></body>

解决高度塌陷方法三

在浮动子元素的下方设置一个空的块元素，然后借助clear属性来消除浮动元素对空的块元素的浮动影响。缺点：在结构里面多了一个空的块元素。

<style type="text/css">.box1 {border: 10px solid red;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}.box3{height: 100px;background-color: yellow;}.box4{clear: both;}</style></head><body><div class="box1"><div class="box2">box2</div><!-- 空的块元素 --><div class="box4"></div></div><div class="box3"></div></body>

解决高度塌陷问题方法四

结合伪类after以及clear来解决
通过伪类after，在元素的后面添加内容，将这个内容转成块元素，再清除其他浮动元素对这个块元素的浮动影响。
一般情况下，我们会给这个写法单独设置一个类名，哪里需要解决高度塌陷问题，就给对应的位置添加类名，这种方式也是最常用的解决高度塌陷问题的方法。

<style type="text/css">.box1 {border: 10px solid red;}.clearfix::after{/* 添加的元素不会独占一行 */content: '';/* 将添加的元素转成块元素 */display: block;/* 清除浮动元素对空的块元素的影响 */clear: both;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}</style></head><body><div class="box1 clearfix"><div class="box2"></div></div><p class="p1 clearfix"><div class="p2"></div></p></body>