盒模型 第二部分

1.浮动的清除 1.1 清除浮动方法1：给浮动的元素的祖先元素加高度。 如果一个元素要浮动，那它的祖先元素一定要有高度。 有高度的盒子，才能关住浮动。 这种方法在工作中用的很少。 1.2 清除浮动方法2 : clear:both 网页制作中，高度很少出现。这是因为能被内容撑高。 clear:both clear 清除 both指的是左浮动、右浮动都要清除，清除对我的影响。 这种方法会导致margin失效。

1.3 清除浮动方法3：隔墙法

一个父亲，是不能被浮动的儿子，撑出高的。 内墙法

公式：两个p都浮动，所以div不能被撑出高。而在家里面修一堵墙，就能够让div被儿子撑出高了。 3.4 清除浮动的方法4： overflow:hidden; overflow:hidden; 溢出隐藏 所有溢出边框的内容，都要隐藏掉。（本意就是清除溢出到盒子外面的文字。） 一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上ｏｖｅｒｆｌｏｗ：ｈｉｄｄｅｎ；那么，父亲就能被儿子撑出高了。

1.5浮动总结： 加高法： 浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度。这是因为麻烦，并且不能适应页面的快速变化。所以，我们就要找到，不给盒子加高度，但是也能够清除浮动的方法。

最简单的清除浮动的方法，就是给盒子增加 clear:both; 表示自己的内部元素，不受其他盒子的影响。

浮动确实被清除了，不会互相影响，但是margin失效，两个div之间没有任何的间隙了。 隔墙法： 在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

上面的例子中，第一个div没有高度。如果我们想让第一个div，自动根据自己的儿子，撑出高度，我们就要使用内墙法。

内墙法的优点：不仅能让后部分的p不去追前部分的p，并且能把第一个div撑出高度。这样，这个div的背景、边框就能根据p的高度来撑开了。 overflow；hidden; 一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden;那么，父亲就能被儿子撑出高了，并且overflow:hidden;能够让margin生效。

1.6 浏览器兼容问题 IE6 不支持小于12px的盒子。（微型盒子） 解决办法:将盒子的字号设置小（小于盒子的高）。

浏览器hack：就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器的兼容。 IE6只要在css属性之前，加上下划线，就是IE6认识的专属属性。

解决微型盒子，正确写法：

IE6不支持用Overflow：hidden；来清除浮动的。 解决办法：

实际上，_zoom:1;能够触发hasLayout机制，这个机制只有IE6有。 overflow：hidden；的本意，是溢出盒子的内容隐藏，这一点IE6是兼容的,不兼容的是清除浮动。 伴生属性：如果碰到IE6的兼容问题，就多写一条hack. 2.margin 2.1 margin的塌陷现象 标准文档流中，竖直方向的margin是不叠加的，以较大的为主。 如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。 2.2 盒子居中 margin:0 auto; margin的值可以为 auto，表示自动。当right/left两个方向都为auto的时候，盒子居中。

注意： （1）使用margin:0 auto；的盒子，必须有width. （2）只有标准流的盒子，才能使用margin:0 auto；居中。 当一个盒子浮动、绝对定位、固定定位，都不能使用margin:0 auto；。 （3）margin:0 auto；是在居中盒子，并不是在居中文本。 文本的居中要使用：

2.3善于使用父亲的padding,而不是儿子的margin 如果父亲没有border，那么儿子的margin实际上踹的是流。所以父亲也就掉下来了。 margin这个属性，本质上描述的兄弟和兄弟之间的距离；最好不要用这个margin表达父子之间的距离。 2.4 关于margin的IE6兼容问题 IE6 双倍margin bug 当出现连续浮动的元素，携带和浮动方向相反的margin时，队首的元素，会双倍margin。 解决方案： （1）使浮动的方向和margin的方向相反。

（2）使用hack;(没必要) 单独给队首的元素，写一个一半的margin.

IE6的3px bug 解决办法：不用管，不允许用儿子踹父亲。所以，如果你出现了3px bug ，说明你的代码不标准。 5.fireworks和精确还原图 CSS中，任何文本都有行高。 首行空两个汉字的格，单位叫做em. em就是汉字的一个宽度。 text-indent: 2em;