Question

以下是演示 http://jsfiddle.net/aTBWh/

容器为id(div)，意味着它从浏览器继承了display:block值，此容器内的两个div是类。它们都有200px和300px，而主容器的宽度为600px，所以当我将其中一个类向右浮动时，它应该只消耗300px整个容器意味着两个div应该放在容器内部而不会出现在另一个容器之上。没有clear:both属性。

如果容器是一个带有600px的id，那么嵌套在它里面的类（特别是当一个浮动到右边时，它们应该填充容器。）

简而言之为什么绿色div类在容器外面明显适合它时，它浮在右边？我没有＆＃39;理解这个问题。

代码： CSS

#content_canvas_container{
    background:#CCC; 
    min-height:200px; 
    border:1px solid red;
    width:600px;
}
.red{
    width:200px; 
    background:red; 
    height:140px; 
}

.green{
    width:300px; 
    background:green; 
    height:140px; 
    float:right;
}

/*PROPERTIES*/
.w90{width:98%} 
.m_auto{margin:auto; border:1px solid black}

HTML

<section id='content_canvas_container'>
 <div class='w90 m_auto'>
   <div class='red'> red </div>
   <div class='green'> green </div>
 </div>
</section>

Answer 1

您所看到的是预期的行为。

发生这种情况的原因是因为默认情况下红色div元素是block级元素。因此，在当前状态下，无论是否具有已定义的宽度或具有浮动的同级元素，它都将始终显示在新行上。

通过浮动或绝对定位元素，您实际上是从文档流中删除它，使display:block无效。因此，您可以通过浮动红色div元素或向其添加display:inline-block来解决此问题。 (example)

jsFiddle example

.red {
    width: 200px;
    background: red;
    height: 140px;
    float: left;
}

Answer 2

使用float:left将允许其他元素环绕它。（CSS-float）

浮动CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。浮动元素是float的计算值不是none的元素。

.red{
    float:left;
}

Fiddle

要理解默认情况下其他元素不会绕过div的原因，请阅读块级元素here。

“块级别”是HTML元素的分类，与“内联”元素形成对比。块级元素可能仅出现在元素中。 它们最重要的特征是它们通常使用元素之前和之后的换行符进行格式化（从而创建独立的内容块）。也就是说，它们占据了容器的宽度。

默认情况下，您的div元素是块级别，除非您另行指定。我引用的链接提供了默认情况下块级别的所有元素的列表。

Answer 3

这种情况发生的原因是当你将float设置为一个盒子时，它会移动到容器的左侧或右侧（当然，根据其他复杂的规则），但它是从顶部的垂直偏移量。容器不能小于没有浮动的容器。

Answer 4

浏览器根据您的要求做出决定。

你没有在红色div上指定一个浮点数，所以它仍然保持在流程中，并且作为普通的块级元素，即“将我后面的所有内容推到下一行”。

然后你告诉绿色div在它的容器中漂浮，所以它转移到右边。

Answer 5

这是因为DIV是块级元素，这意味着它们以新行开头。在您向右浮动.green的示例中，.red元素仍占用100％的水平空间，而.green现在占用300px，但它被推下，因为它作为块级元素属于它到下一行。要避免此行为，您必须将block元素转换为inline元素。

所以在这种情况下，如果你想将.green浮动到右边，那么父包装器中的DIV元素应该呈现为内联块而不是独立块，只需添加以下规则：

.m_auto div {
   display: inline-block;
}

干杯。

为什么会发生这种CSS错误

5 个答案: