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,到这里,解决高度塌陷的方法已经介绍完了,如果你还有其他好的方法的话,欢迎一起来交流哦!
原文地址:https://www.cnblogs.com/momeak/p/10992950.html