前言：
现在大家对“html5浮动塌陷”大约比较关心，朋友们都需要知道一些“html5浮动塌陷”的相关文章。那么小编在网摘上收集了一些有关“html5浮动塌陷””的相关内容，希望大家能喜欢，小伙伴们快快来学习一下吧！我们要先了解一下什么是浏览器兼容性，
指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。（JS、html、css的兼容性）
在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。
具体指的是以下两方面的不兼容：
a) 不同的浏览器对CSS解释不同
b) 不同的浏览器的默认值表现差别
说到浏览器的兼容性，那我们要了解一下有那些浏览器和浏览器的历史了。
A. Netscape Navigator
Netscape Navigator 网景，开始时是收费的。为IE的崛起留下了后患。
B. IE浏览器
1995年 IE浏览器第一个版本首发
1997年IE4版本发布，再后来2001年8月IE6浏览器独占鳌头
2006年10月IE7发布
2009年3月IE8发布
2011年3月IE9发布
2011年4月IE10发布
C. 2004年11月Firefox1.0首发
D. 2008年 谷歌浏览器发布
E. 1995年4月 opera浏览器发布
做好浏览器的兼容性，也就是我们写的代码要符合一种标准，再让浏览器都符合这种标准也就实现了浏览器的兼容了。
首先我们来看一下我们写的代码要符合那种标准，也就是W3C标准。
W3C—World Wide Web Consortium 万维网联盟，万维网联盟创建于1994年，是WEB技术领域最具有权威和影响力的国际中立性技术标准机构。Web标准是一系列标准的集合。网页主要由三部分组成：结构（Structure）也就是HTML、表现（Presentation）也就是CSS、行为(Behavior)也就是JS。那怎样让我们的代码做到符合WEB标准呢？
HTML标准
1. 每个文档必须加上DOCTYPE声明
2. 定义语言编码
3. 图片的alt="" 属性必须每张图片都加上，而且对齐属性用CSS来定义
4. 标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);
5. 同一个页面当中，同名的ID会产生冲突
6. 标签属性不可省略双引号或单引号，尽量使用双引号
7. 标签之间不可交叉嵌套
8. 所有的标签都使用小写
9. 闭合。双标签必须闭合，单标签（自关闭标签）不闭合
10. 所有的样式全部写在外部文件
11. 页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“
o 任何小于号（<）,不是标签的一部分，都必须被编码为
o 任何大于号（>）,不是标签的一部分，都必须被编码为
o 任何与号（&）,不是实体的一部分的，都必须被编码为
12. 栏目标题部分使用h标签
13. 对于SEO优化的标签有二个比较重要的Strong和Em的。它们的权重是很高的，Strong有重点，突出之意，em有强调 提醒之意
14. 使用表格时不要给表格指定高度，
15. 使用<label>标签包裹radio或checkbox和他们的文字
16. 省略type属性。使用style、link、script，不用指定type属性，因为 text/css 和 text/javascript 分别是他们的默认值。
17. 省略Boolean属性值。Boolean属性不用添加取值，disabled,checked,selected等
18. 详尽注释但是不建议块状注释
CSS标准
1. 不建议CSS中嵌套的层次太多，建议三次为佳
2. 建议把具有共性的CSS提成全局的这样每个需要使用的标签可以去继承；减少CSS代码会提高加载效率
3. 在书写CSS时，建议使用全小写字母
4. 在写CSS属性时，能写复合属性的写复合属性
书写代码原则
1. 规范 。保证您的代码规范，趋html5，远xhtml，保证结构表现行为相互分离
2. 简洁。保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。
3. 实用。遵循标准，但是不能以牺牲实用性为代价
4. 忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人写的一样。
以上也是我们书写代码时注意事项。
了解以上的知识点之后我们来看一下如何做到写的代码浏览器兼容吧及常见问题及解决方案
√ CSS Hack(修改)
√ 常见问题（bug）及解决方法
√ 经验与技巧
一、 CSS Hack
1. 什么是CSS Hack
由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack
2. CSS Hack的分类
IE条件注释Hack
CSS选择符Hack
CSS属性Hack
!important
Css3新增属性及选择器hack
注：css hack的书写顺序：总结出的规律就是：先一般，再特殊 。
好，我们CSS Hack分别讲解一下吧！
2.1 IE条件注释Hack
为什么使用IE条件注释法呢，因为IE的版本不断的更新，还有一部分用户在使用老版本的浏览器，浏览器的版本之间也存在着浏览器的兼容问题，所以要做好浏览器的兼容性。就像现在，如果我们写代码要把IE浏览器兼容好的话，我们要做兼容IE6、IE7、IE8、IE9、IE10、IE11;但是我们知道IE6、IE7几乎没有人使用了，所以我们做页面不需要考虑IE6和IE7了。但是我们对于以前的知识点还是要掌握的。
在这里大家要装一下IE Tester这个集成浏览器。这个软件将所有的IE版本的浏览器集成到了一起，测试不同版本的浏览器兼容性比较方便。
语法：
a):针对CSS添加的条件注释法，根据代码具有注释的版本识别的CSS样式。
<!--[if IE]><!-- 如果是IE浏览器,调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<![endif]-->
HTML代码：
CSS代码：
IE浏览器的显示效果：
其它浏览器版本显示的都一样，这里就不一一截图了！
非IE浏览器的显示效（因为是专门对IE浏览器的，所以其它浏览器就不会有效果了）：
所以我们可针对不同的IE浏览器那一部分的CSS存在兼容的问题，可以单独去写相关的CSS代码。如果还可以专门指定是那个版本，也可以再加上相关的修饰符，我们这里只演示一个(lt),其它的使用方式都一样。来看一下效果。
HTML代码：
CSS代码：
显示效果：
HTML代码：
CSS代码：
显示效果
b):针对HTML标签添加的条件注释法，有些标签也这样加条件注释法。让其在不同的浏览器中显示。
<!--[if IE]>
<h2>我是IE中看到</h2>
<![endif]-->
代码
显示效果：
2.2 CSS选择符Hack
如果IE6与IE7存在不兼容问题的时候可以使用这种CSS选择符，选择器前面加个*号，是只有IE6识别的代码，选择器前面加个*+号，是只有IE7识别的代码。像这种浏览器的兼容性多数都是加在距离上的不兼容。我们在这里演示的时候是以颜色进行演示的，其它的加法都是一样的。
代码：
显示效果:
再看IE7识别的*+。
代码:
浏览器中显示效果
2.3 CSS属性Hack
CSS属性Hack是给CSS中的属性加不同符号对于不同的浏览器进行识别。
2.3.1 _:仅IE6识别的属性
代码：
显示效果：
2.3.2 *+：仅IE7专用的属性（资料上都是这样说的，但是IE6也是识别的）
代码：
显示效果：
两个浏览器所以再区分一下IE6和IE7，就写个IE6能识别的代码就可以了。
代码：
显示效果：
2.3.3 \0:仅IE8识别，但是随着浏览器的更新，IE9 IE10也识别。
代码:
显示效果：
2.3.4 \9:IE6-IE10都识别的代码，但是\9\0只有IE9、IE10识别。
代码：
显示效果：
2.4 !Important
!important作用是提高指定CSS样式规则的应用优先权,ie7,ie8,firefox,chrome等高端浏览器下，已经可以识别 !important属性 IE 6.0仍然不能完全识别.
代码：
显示效果：
2.5 新增CSS选择器及属性只需在选择器或属性前加上相对应的浏览器前缀即可。（这里就不再熬述）
-webkit- Chrome
-moz- FF
-ms- IE
-o- Opera
二、 常见问题（bug）及解决方法
1、 IE及IE6浏览器最常见的一些bug及解决方法
1.1 IE6双边距bug
当页面上的元素使用float浮动时，不管是向左还是向右浮动;只要该元素带有margin像素都会使该值乘以2，例如“margin- left:10px” 在IE6中，该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display:inline
代码：
显示效果：
解决方案：
给该浮动的元素加display：inline；这个CSS属性。
代码：
显示效果：
1.2 IE6中3像素问题及解决办法
当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部，当设定高度后又跑到容器的相反侧了。要解决这类BUG的话，需要使布局在同一行的元素都加上float浮动。
代码：
显示效果：
1.3 margin:0 auto,对IE6不起作用
代码：
显示效果：
解决方案：
最简单的方法是在父元素中使用 text-align: center 属性，而在子元素中使用 text-align: left。
代码：
显示效果：
1.4 IE6下空元素的高度BUG或者是微小高度的设置
如果一个元素中没有任何内容，当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。
显示效果：
解决方法：
在元素的css中加入：font-size:0;
代码：
显示效果：
1.5 IE6不识别min-height(max-height)属性
IE6不认识min-height，IE6里的内容会自动撑开
代码：
显示效果：
解决方法：
div { height:auto!important; height:200px; min-height:200px; }
代码：
显示效果：
1.6 IE6中图片鼠标滑过边框显示一半问题（给图片加超链接时产生的）（先参考1.7）
代码：
显示效果：
IE6及非IE6的解决办法：a：hover{display:block;}因为:hover只能给a标签使用
非IE6还可以这样的解决办法:img:hover{border:1px solid red;} :hover可以给任一标签使用
代码：
显示效果：
1.7 5.IE浏览器给图片加超链接时，图片自动会加上边框（紫色两像素的边框）
代码：
显示效果：
解决办法：
img{border:none/0}
代码：
显示效果：
2、 所有浏览器都有的常见问题（bug）及解决－－图片及间距及行间等问题及解决
2.1 图片下方有空隙产生(原因是：图片嵌套在一个父元素里而产生的空隙)
代码：
显示效果：
解决方法：
img{vertical-align:middle;}
vertical-align:top/bottom/middle或img{display:block;}
代码：
显示效果：
2.2在各个浏览器下img有空隙(原因是：图片换行写产生的3像素的空隙。)
代码：
显示效果：
解决方案:让图片浮动。（即：img{float:left;}）
代码：
显示效果：
2.3 2 Input与img垂直方向不对齐问题或者img与文本之间垂直方向不对齐问题 。
代码：
显示效果：
解决方案： img{vertical-align:middle}，有时需要给img或其它标签添加float
代码：
显示效果：
2.4 不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
（此处不再熬述了，因为讲margin、padding时已经讲过了。 ）
解决方案：
*{margin:0;padding:0;}
2.2 两个块元素，垂直方向的margin值不增加，会重叠，其间距为最大margin值（此处不再熬述了，因为讲margin、padding时已经讲过了。 ）
2.3 给子元素加margin-top时，浏览器中是给父元素添加了margin-top的值了
代码:
显示效果：
解决方案：给父元素添加padding-top:margin-top的值；或者给父元素添加 padding-top:0.1px;
代码：
显示效果：
2.7 一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度（父元素的高度塌陷）。（这里请参考清除浮动的方法）
解决方案： a 在子标签最后清浮动
b 父标签添加{overflow：hidden；}
c 给父标签设置高度
d 使用万能清除浮动法
2.8 一行文本垂直居中问题 （这里也不再多熬述，请参考段落属性）
vertical-align: middle;/*不管用*/
解决方案：
height:30px;
line-height:30px;
2.9 opacity 定义元素的不透明度
解决方案：
filter：alpha（opacity=80）；/* IE支持该属性*/
opacity：0.8；/*支持css3的浏览器*/
2.10 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
2.11 a标签hover不适用于所有标签
产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
解决方案：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；
2.12 浏览器对表单元素的显示不一样
解决方案:
添加css样式控制外观样式
2.13 各个浏览器解析不一样
解决方案:
减少 的使用
三、 经验与技巧
1. 斜角的纯CSS制作规范
代码：
显示效果：
案例应用：
代码：
显示效果：
标签： #html5浮动塌陷
