float 属性如何阻塞元素？答案

【问题标题】：How does float property blockify the element?float 属性如何阻塞元素？
【发布时间】：2016-11-28 04:41:11
【问题描述】：

根据 Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) 规范，当一个元素被赋予一个非浮动属性时，它会隐式地将显示设置为块，但在我看来，它的行为就像一个内联块元素，因为它不需要 100% 的父级宽度。
一个例子：

这两个蓝色 blox 浮动到左侧，因此它们隐式设置为 display:block 但它们没有占据包装 div 的整个宽度（红色矩形）。

HTML 代码

<div class="wrapper cf">
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS 代码

.wrapper {
   background-color: red;
   padding: 10px;
}

.box {
   margin: 10px;
   height: 100px;
   width: 100px;
   background: lightblue;
   float: left;
}
.cf:after {
   content: "";
   display: block;
   clear: both;
}

【问题讨论】：

能否请您显示上述示例的完整代码？
@JonathanLam 完成！
您不是将width 明确定义为100px 吗？因此，它们不应占据红色矩形的整个宽度。
@JonathanLam 定义块元素的宽度不允许其他元素在它旁边，它仍然“保留”它的父元素的整个宽度
块级元素填充其容器全宽的规则仅适用于block-level elements in normal flow。浮点数不正常，有their own width rules

标签： css

【解决方案1】：

“有一个简单的解决方案可以修复许多 IE 浮动错误。所有的浮动都变成了一个方块；标准规定显示属性对于浮点数将被忽略，除非它被指定为无。如果我们将 display:inline 设置为浮动元素，一些 IE/Win 错误会像变魔术一样消失。 IE/Win 不会将元素变成内联框，但修复了许多错误。” [浮动布局]

正如所暗示的，添加该块的主要原因是为了解决 IE 中的浮动问题。尽管 display:block 是隐式定义的，但显示值在技术上并不应用于浮动元素，除非它设置为 none。

如果你想了解更多关于浮点数的知识，这篇文章还不错：CSS Float Theory: Things You Should Know

【讨论】：