如何解决高度塌陷

Posted 2021-12-31 momeak

　　hello 朋友们，我又来了哦！对的没错，今天的话题呢就是高度塌陷。

　　首先要知道什么是高度塌陷。高度塌陷其实就是指当父元素没有给确定的高度（即父元素高度靠子元素撑起来），并且子元素添加了浮动时，内容无法撑起父元素的高度，即父元素发生高度塌陷。

　　解决办法：

　　　　第一种，开启元素的BFC，元素将会具有如下的特性：
　　　　　　　　　　1.父元素的垂直外边距不会和子元素重叠
　　　　　　　　　　2.开启BFC的元素不会被浮动元素所覆盖
　　　　　　　　　　3.开启BFC的元素可以包含浮动的子元素

开启元素BFC属性的方式：

　一、给父元素添加声明，清除浮动   overflow：hidden；
　　但这种方式会父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，会造成其他的结构问题所以一般不建议采用。

　二、设置元素定位
 
　三、设置元素为 display：inline-block；也可以解决问题，但是会导致宽度丢失，也不推荐使用这种方式
　

　　　　第二种，在浮动的子元素后面添加一个空的 div，并给该这个 div 元素加样式：

23              *     由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
24              *     然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
25              *     基本没有副作用

　　　　　　.boxWrap .con
　　　　　　　　　　clear: both;　height: 0; overflow: hidden;

　　　　　　　　

 

　　　　　　<div class="boxWrap">

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<div class="con"></div>

　　　　　　</div>

　　　　第三种，万能清除浮动法：

　　　　　　.boxWrap:after

　　　　　　　　　　　　content:".";

　　　　　　　　　　　　display: block;

　　　　　　　　　　　　clear: both;

　　　　　　　　　　　　height: 0;

　　　　　　　　　　　　overflow: hidden;

　　　　　　　　　　　　visibility: hidden;

　　　　　　　　

 

　　　　　　<div class="boxWrap">

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　</div>

 

　　这个方法是目前最好的解决方法，解决问题的同时，也不会带来新的问题，更不会扰乱父元素的结构与样式，因此是最推荐使用的一种方法。

 

 OK，到这里，解决高度塌陷的方法已经介绍完了，如果你还有其他好的方法的话，欢迎一起来交流哦！