为什么说浮动元素的显示属性是块级的？答案

【问题标题】：Why is the display property of floated elements said to be block level?为什么说浮动元素的显示属性是块级的？
【发布时间】：2018-10-22 21:55:24
【问题描述】：

为什么我们说浮动元素的display属性可能会变为块级，而不是说inline-block，因为它开始根据它包装的内容占用空间？

【问题讨论】：

【解决方案1】：

inline-block 表示内联级别，块容器。

行内元素参与一行（或多行）的布局。这会影响同一行中其他元素的行间距和垂直对齐方式。

浮动元素不做这些。参与块格式化上下文，而不是内联格式化上下文。

【讨论】：

我可能会补充一点，浮动元素在设计上是 缩小以适应内容，这就是为什么我们可能认为它们比块元素 更像内联块（直观新编码员的反思）
不要忘记浮动是水平排列的。
从历史上看，display 属性似乎主要控制外部显示类型（即inline-block 的内联级别部分）。浮动元素的外部显示类型更像是内联元素而不是块元素，所以什么不使用inline 而不是block 或inline-block？
@wlnirvana - 对于非替换元素，浮动、in-flow inline-block 和 in-flow 块元素都是块容器，而 inline 元素不是，因此“inline”不合适.正如我在回答中所解释的，浮动不参与线框的布局，而 inline、inline-block、inline-table、inline-flex 和 inline-grid 元素可以。
@wlnirvana - re：1）它是一个块容器并建立一个BFC是的。但不是而不是国际金融公司。如果它只有内联后代，它将建立一个 IFC 以及一个 BFC。回复：2）几乎是的。行框是布局的一个关键概念，它会影响行高等内容，从而影响文本在垂直方向上的间距。浮动不包含在行框中，因此不会影响间距。出于实际目的，它们不是内联级别比它们实际是什么级别更重要。

【解决方案2】：

这就是 float 的目的。在here找到一些信息

float CSS 属性指定元素应放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从网页的正常流程中移除，但仍保留为流程的一部分（与绝对定位相反）。

还有

当一个元素浮动时，它会脱离文档的正常流程（尽管仍然是它的一部分）。它向左或向右移动，直到触及其包含框的边缘或另一个浮动元素。

【讨论】：