Css float属性如何阻止元素？

根据级联样式表2级修订版2（CSS 2.2）规范， 当一个元素被赋予除none以外的float属性时，它会隐式地将display设置为block，但在我看来，它的行为就像一个内联块元素，因为它不占其父元素宽度的100%。
例如：

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

HTML代码

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

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

这表明，添加块的主要原因是为了解决IE中浮动出现的问题。尽管display:block是隐式定义的，但从技术上讲，显示值不适用于浮动元素，除非它设置为“无”

如果您想了解有关浮动的更多信息，这是一篇非常好的文章：

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

这表明，添加块的主要原因是为了解决IE中浮动出现的问题。尽管display:block是隐式定义的，但从技术上讲，显示值不适用于浮动元素，除非它设置为“无”

---

如果你想了解更多关于浮点数的信息，这是一篇非常好的文章：

你能展示上面例子的完整代码吗？@JonathanLam done！你不是明确地将

宽度定义为
100px
？因此，它们不应该占据红色矩形的整个宽度。@JonathanLam定义块元素的宽度nt不允许其他元素在它旁边，它仍然“保留”它的整个宽度块级元素填充其容器的整个宽度的规则只适用于。浮动不是正常流动的，您可以为上面的示例显示完整的代码吗？@JonathanLam done！您不是明确地将
宽度
定义为
100px
？因此，它们不应该使用up红色矩形的整个宽度。@JonathanLam定义块元素的宽度不允许其他元素靠近它，它仍然“保留”它的父元素的整个宽度块级元素填充其容器的整个宽度的规则只适用于。浮动不是正常流动，并且具有
.wrapper {
   background-color: red;
   padding: 10px;
}

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