高度塌陷

一、高度塌陷

　　（一）在文档流中，一个块级元素如果没有设置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撑高了
　　在遇到高度坍塌的问题的时候，有多重解决方案，如何解决，还是取决于项目的需求和方案的设计。
posted @ 2019-01-19 09:24  元哥0317  阅读(207)  评论(0)  编辑  收藏  举报