不浮动时的块元素独占一行,浮动后的块元素不独占一行对吧?
浮动后的元素倾向于自动收缩, 直至包裹住里面的子元素.
当"块级元素"设置浮动后, 自动收缩, 直至包裹住里面的子元素, 所以不会独占一行.
例子:
无序列表中li是块级元素, 独占一行, 所以在普通文档流中, 无序列表是垂直排列的
使用无序列表设置水平导航菜单时, 块级元素li浮动之后, li的盒子自动收缩直至包裹其子元素, 不再独占一行, 所以可以水平排列.
试试不就知道了
可以这样说吧,实际上是:
设置浮动后浮动框不在文档的普通流中(不占据任何空间),文档的普通流中的块框表现得就像浮动框不存在一样。所以父元素实际上也就没有内容,就会收缩,容器元素也就不会包围它们。
同时元素被设置浮动后,不给该元素显示设置宽度,它也会自动收缩并始终包裹住子元素。所以就不独占一行了。