Question

我正在学习更多有关显示和浮动的信息，并注意到当我将浮动应用于所有显示类型时，它们都表现得像显示：内联块。

这是一个没有浮动的jsfiddle：

这是一个左边的浮动：

CSS：

.first {
    background-color: #435671;
}

.second {
    background-color: #135671;
}

.third {
    background-color: #935671;
}

.inlineblock {
    display: inline-block;
}

.inline {
    display: inline;
}

.block {
    display:block;
}

.testDiv {
    text-align: center;
    float:left;
    width: 33%;
    height: 100px;
}

任何人都可以解释为什么会发生这种情况，我原本期望内联元素至少保持其大小？

Answer 1

对于内联元素，宽度被忽略（MDN：“内联元素仅占用由定义内联元素的标记限定的空间。”）

同样来自MDN：

由于float意味着使用块布局，它会修改计算结果   在某些情况下显示值的值：

指定值：内联

计算值：阻止

...

Thins意味着当您将display设置为内联元素时，它的block值将被强制为^https?://.+?/(?P<token>[^/\n\r]+)。这就是为什么你得到你在问题中描述的效果。

https://developer.mozilla.org/it/docs/Web/CSS/float https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Answer 2

它的行为不像inline-block。

inline-block元素之间有默认的间距。检查你的第一个小提琴。

float使其行为类似于block元素，它向左或向右浮动。

Answer 3

float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。

Src：https://developer.mozilla.org/en-US/docs/Web/CSS/float

这只是意味着内联或块的元素的行为类似于内联块，但内联元素没有白色空间。

浮动：左侧有不同的显示类型

3 个答案: