标签：方案 head let 完全 表示 响应式 无法 html 开发
一、高度塌陷
（一）在文档流中，一个块级元素如果没有设置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>
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>
标签：方案 head let 完全 表示 响应式 无法 html 开发
原文地址：https://www.cnblogs.com/liufuyuan/p/10290440.html
