首先探讨一下高度问题,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大小相关。)
------------------->
-->
参考链接:
1.浮动元素在浮动的时候,其margin不会超过包含块的padding
2.如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
例如,div爸爸包含了div1和div2,要是div1+div2的宽大于div爸爸,那么div2会换行(div2定义在div1后面)