float问题

首先探讨一下高度问题，div里面如果有文字，那么div的高度是由文字的高度造成的，还是其他的高度造成的呢？答案是div的高度是由“line-height”造成的 ,一般来说，div标签就是一个containing box（包含块），在containing boxes里，包含了许多inline boxes，一个一个的inline boxes组成了line boxes，而line boxes的高度由最大的line-height给出，而float破坏了line-height

(注：CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为”height+padding+margin“，另外一个是line box模型，对应样式为"line-height"。对于文字而言，content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。)

------------------->

-->

 

参考链接：

CSS float浮动的深入研究、详解及拓展(一)   

line boxes   

清除浮动的方法

 

1.浮动元素在浮动的时候，其margin不会超过包含块的padding

2.如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。

例如，div爸爸包含了div1和div2,要是div1+div2的宽大于div爸爸，那么div2会换行（div2定义在div1后面）