float属性如何阻挡元素？

根据层叠样式表级别2修订2（CSS 2.2）规范，当元素被赋予浮动属性而不是无，它隐式设置显示为阻止，但我看到它的方式，它的行为像一个内联 - 块元素，因为它不占用其父宽度的100％。
一个例子：

这两个蓝色bloxes漂浮到左侧，这样他们隐含地设置为显示：块，但他们并没有采取包装DIV（红色矩形）的整个宽度上。float属性如何阻挡元素？

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; 
}

来源

2016-07-24 3abkareeno

能否请你显示了上面的例子的完整代码？ –

@JonathanLam完成！ – 3abkareeno

你不是明确定义'width'为'100px'吗？因此，它们不应占据红色矩形的整个宽度。 –

“有一个简单的解决方案，修复了很多的IE浮动的bug。所有的花车都成为一个方块箱;该标准指出，浮点数的display属性将被忽略，除非它被指定为none。如果我们设置display：inline作为浮动元素，那么一些IE/Win bug会像魔术一样消失。 IE /赢不会使元件进入一个行内框，但许多错误的是固定的。” [浮法布局]

作为该所暗示的，在添加块的主要原因是，用于固定该问题想出了在IE中的花车。尽管display：block是隐式定义的，但除了设置为无之外，显示值在技术上不适用于浮动元素。

如果您想了解更多关于浮动，这是一个相当不错的文章：CSS Float Theory: Things You Should Know

来源

2016-07-24 22:52:49

float属性如何阻挡元素？

回答

相关问题