来源：wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/">http://www.zhangxinxu.com/wordpress/2010...

在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是Box盒状模型，对应CSS为”height+padding+margin”，另外一个是line Box模型，对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个词。而后者针对于文字等这类inline Boxes的元素（图片也属于inline Boxes，但其height比line-height作用更凶猛，故其inline Boxes高度等于其自身高度，对line-height无反应），inline Boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline Boxes组成的line Boxes（等于内部最高的inline Box的高度），而这些line Boxes的高度垂直堆叠形成了containing Box的高度，也就是我们见到的div或是p标签之类的高度了。所以，对于line Box模型的元素而言，没有inline Boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的inline Boxes也破坏了，于是这些元素也就没有了高度。