高度塌陷

Posted liufuyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高度塌陷相关的知识,希望对你有一定的参考价值。

一、高度塌陷

  (一)在文档流中,一个块级元素如果没有设置height,其height是由子元素撑开的;也就是子元素多高,父元素就多高;

     但是为子元素设置浮动后,子元素会完全脱离文档流,此时会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷;

     由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱,也就是所谓的高度塌陷。

  (二)高度塌陷的解决办法

    1、给父级div定义高度

      原理:给父级DIV定义固定高度,能解决父级div无法获取高度的问题。

      优点:代码简洁

      缺点:高度固定,适合高度固定不变的页面,不适合响应式网站。(不推荐使用)

    2、使用空元素,如<div class="clear"></div> (.clear{clear:both})

      原理:添加空的div标签,利用css的clear:both属性清除浮动,让父级div能够获取高度。

      优点:浏览器兼容性与支持都是很好的。

      缺点:多了很多空div标签,如果页面中浮动模块多的话,就会出现很多的空div标签,对于代码的维护与开发有很大的干扰。(不推荐使用)

    3、父级div定义 display:table

      原理:将div属性强制变成表格

      优点:暂时不知

      缺点:会产生新的未知问题。(不推荐使用)

    4、父元素设置 overflow:hidden、auto;

      原理:这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout(zoom:1)

      优点:代码简介,不存在结构和语义化问题

      缺点:无法显示需要溢出的元素(亦不太推荐使用)

    拓展:BFC是什么?

      根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context简称BFC,该属性可以设置打开或者关闭,默认是关闭的。当开启元素的BFC以后,元素将会具有如下的特性:

      1)父元素的垂直外边距不会和子元素重叠

      2)开启BFC的元素不会被浮动元素所覆盖

      3)开启BFC的元素可以包含浮动的子元素

    5、父级div定义 伪类:after 和 zoom

      .clearfix:after{content:‘.‘;display:block;height:0;clear:both;visibility: hidden;}

      .clearfix {zoom:1;}

      原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

      优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)

      缺点:代码不是非常简洁(但是极力推荐使用)

      zoom表示放大的意思,后边跟着一个数值,写几就将元素放大几倍

      zoom:1表示不放大元素,但是通过该样式可以开启hasLayout

      zoom这个样式,只在IE中支持,其他浏览器都不支持。

    代码如下:

 1 <!DOCTYPE html>
 2  <html>
 3  <head>
 4  <metacharset="utf-8"/>
 5  <title>test1</title>
 6  <style type="text/css">
 7    .box1{
 8      /*为box1设置一个边框*/
 9      border: 20px #008cff solid; 
10    }
11    .box2{
12      width: 200px;
13      height: 200px;
14      float: left;
15    }
16    .box3{
17      height: 200px;
18    }
19 20 </style>
21  </head>
22  <body>
23    <divclass="box1">box1
24      <divclass="box2">box2</div>
25    </div>
26    <divclass="box3">box3</div>
27  </body>
28  </html>

 

  技术分享图片
 
  box1高度坍塌,没有被box2撑起来
 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <metacharset="utf-8"/>
 5 <title>test2</title>
 6 <styletype="text/css">
 7   .box1{
 8     border: 20px#008cffsolid;
 9     zoom:1;
10     overflow: hidden;
11   }
12    .box2{
13     width: 200px;
14     height: 200px;
15     float: left;
16   }
17   .box3{
18     height: 200px;
19   }
20  
21 </style>
22 </head>
23 <body>
24    <divclass="box1">box1
25     <divclass="box2">box2</div>
26   </div>
27    <divclass="box3">box3</div>
28  
29 </body>
30 </html>

 

  技术分享图片
  box2把父盒子box1撑高了
  在遇到高度坍塌的问题的时候,有多重解决方案,如何解决,还是取决于项目的需求和方案的设计。

以上是关于高度塌陷的主要内容,如果未能解决你的问题,请参考以下文章

如何解决高度塌陷

css高度自适应以及高度塌陷总结

解决高度塌陷的方法

高度塌陷问题以及如何解决高度坍塌问题

高度塌陷的产生条件和解决方法

关于float高度塌陷问题