导航栏使用
float:left
来将列表项并排排列。然而,使用float
不是暗示了使用display:block
吗?因此,由于块元素垂直堆叠,为什么float:left
会使它们彼此相邻呢?此外,W3C中提到:
在块级格式化上下文中,每个盒子的左外边缘与包含块的左边缘相接触(对于从右向左的格式化,右边缘相接触)。 即使存在浮动,这一点也是正确的(尽管由于浮动,一个盒子的行框可能会缩小),除非该盒子建立了新的块级格式化上下文(在这种情况下,该盒子本身可能会由于浮动变得更窄)。
(强调是我添加的)
这不意味着每个元素无论如何都会以块形式垂直堆叠吗?
float:left
特别用于display:block
,因为display:block
默认垂直堆叠。对于display:inline
或inline-block
等元素,你不需要float:left
,因为这些元素已经自动侧向堆叠/排序/对齐了。 - myfunkysidefloat:left
或right
,这不会将display
更改为block
。但对于内联元素,您也可以使用text-align:right
或center
,而对于块级元素则不能。这就是为什么(据我所知)float
通常用于块级元素的原因。但是内联元素绝对没有隐含的float
属性。 - myfunkysidefloat:left
或float:right
实际上意味着display:block
。详见:http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo - Guffadisplay:block
属性(除了一些像list-item
和table
这样的display
值)。 - Guffa