CSS设置为显示内联，但检查器显示块

Question

我正在尝试将h3标记设置为内联，但无论我在CSS中使用什么规则，Inspector中的框模型都会显示display: block。

.widget_title {
    display:inline;
    float:left;
}

为什么会这样？

Answer 1

看起来很简单：在内联元素上使用float属性会强制inline元素成为block元素。

Read this CSS specs to learn more.

基本部分在这里：

  

左   该元素生成一个浮动到左侧的块框。   内容从盒子的右侧开始流动，从顶部开始   （取决于＆＃39; clear＆＃39;属性）。

Answer 2

当您使用浮点数时，将绝对位置或固定位置放在元素上会强制此元素超出正常流量。当一个元素超出正常流程时，显示：内联或内联块，没有任何意义。这就是为什么正常流程中的元素被视为块元素，无论它们的显示css属性如何。 This是一篇关于花车的古老而有趣的文章。