解决高度塌陷的三种方法

如何解决高度塌陷；

大家都知道在写网页的时候会出现很多问题，在新手村最让我们感到头疼的也就是高度塌陷这一个难题了

首先我们要知道什么叫高度塌陷：高度塌陷是指我们的父元素在没有给定高度的时候，子元素添加了浮动，这样子元素处于半脱离文档流 ，内容就无法撑起父元素的高度，即父元素就发生了高度塌陷这个问题

 

解决的办法1

开启元素的bfc，元素就会拥有以下的属性：

1. 父元素的垂直外边距不会和子元素重叠
2. 开启bfc的元素不会被浮动元素所覆盖
3. 开启bfc的元素可以包含浮动的子元素

• 给父元素添加声明 overflow：hidden

       这个方法很便捷，但是在页面布局时存在局限 超出元素的部分会被隐藏

• 给父元素加overflow：auto时候 页面会出现滚动条虽然高度塌陷解决了  但是也会变成有滚动条
• 设置display：inline-block 也会变成bfc  但是div将变成表格属性

---

Css代码：

大的盒子里面最后添加一个空盒子并且添加属性clear：both来清除浮动，让父级元素获得高度

<style type="text/css">

.div{background:#000080;border:1px solid red}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}



.box3{clear:both;height:0;overflow:hidden;}

</style>

Html代码

<div class="div">

<div class="left">Left</div>

<div class="right">Right</div>

<div class="box3"></div>

</div>

<div class="div2">

div2

</div>

 

 

 

 

 

 

 

解决方法三

   万能清除法

 .

boxWrap:after{

content:".";   content属性,写入内容

 display: block;   刚刚写入的内容为行内元素,而清理浮动时必须为块对象!!

所以,--->display,将行内元素转换在块级元素

 clear: both; 添加clear:both属性,才能清理掉浮动

 height: 0;   添加的内容还可以呈现在页面效果中,所以将高度清为零

 overflow: hidden;高度清为零了,但是文本仍然显示,其实现在的文本已经超过容器规定的尺寸,现在只需要将溢出的部分进行隐藏就可以了

visibility: hidden;

}



<div class="boxWrap">

<p></p>

<p></p>

<p></p>

<p></p>

</div>