为什么CSS float不更改以下div的宽度？

据我所知，float:left，它会将后续元素推到其左侧，而不是推到新行上

---

在下面的示例中，我希望第二个div从第一个div的右侧开始，但正如您在下面的jsfiddle中看到的，它仍然跨越整个宽度

另一方面，内容神奇地从它应该的地方开始。

float

规则是否只浮动内容而不浮动边距

.inline{
浮动：左；
}
黄先生{
背景颜色：黄色；
}

第一行

第二行

第三行

浮动div

您还需要浮动黄色的

div

，然后它就会工作

.inline {
    float:left;
}

.yellow {
    background-color:yellow;
    float: left;
}

但是，仅仅是浮动元素并不会自动将其放在下一个元素的左侧，因此需要

display:inline block

显示同一行上的下一个div，并

显示：block显示在下面

您还应该为两个div提供一个宽度（如果需要，以百分比为单位），这两个div加起来等于或小于100%，包括任何左、右边距和填充（如果以内联方式显示）

您可以做的另一件事是为
.inline
设置一个宽度并使其浮动，然后为
.yellow
指定与其左边距相同的值，并且不使其浮动

.inline {
    float:left;
    width:50px;
}

.yellow {
    background-color:yellow;
    margin-left:50px;
}

这将允许
.yellow
div填充剩余的宽度

希望这有帮助。
CSS:

.inline {
    float:left;
    position:relative;
    width:auto
}

.yellow {
    background-color:yellow;
    position:relative;
    float:left;
}

这是浮动定位的预期行为

当一个元素向左浮动（在您的例子中是
.inline
div）时，以下内容沿着该元素的右侧向下流动，行框会缩短，但由以下元素（在您的例子中是
.yellow
div）建立的行框的宽度是保留的

规范中记录了这一点：


由于float不在流中，因此会创建未定位的块框
如果浮子未移动，则浮子盒前后垂直流动为
存在。
但是，当前和后续行框是在
根据需要缩短浮子，以便为边距框留出空间
浮子的底部

这意味着未定位的块级元素（如
，
，…）-忽略浮动，而线框沿着浮动的一侧流动

举例如下：


IMG框向左浮动。下面的内容是
格式设置在浮点的右侧，从与
浮动浮子右侧的线框因以下原因而缩短：
浮子的存在，但恢复其“正常”宽度（浮子的宽度
包含浮点后由P元素建立的块）

因此，如果给
.yellow
元素一个背景，您将看到它跨越容器并继续通过浮动元素

解决方案
发件人：

表的边框框、块级替换元素或
正常流中建立新的元素（例如具有“溢出”而不是“可见”的元素）必须
不与元素本身重叠任何浮动的边距框

因此，如果在
.yellow
div中添加一个
溢出
属性，该属性的值不是
可见
，则可以防止div与浮动元素重叠：


.yellow{
溢出：隐藏；
}


重叠特别适用于在浮动元素之后继续正常工作的情况

如果它在默认情况下受到限制，则在浮动元素下
 你说不浮动保证金是什么意思？你不清楚的浮动是什么？我希望第二个div开始与第一个div对齐。div内容实际上是对齐的，但是背景覆盖了整个宽度。我不明白为什么会这样。你只是看到背景通过浮动div显示。浮动元素从文档的正常流中删除，并尽可能向左（或向右）推。我希望它看起来像这里（）但是，如果没有明确使用基于您发送给我的第二个链接的边距，它们会声明：浮动框的边距不会与相邻框的边距一起塌陷，事实并非如此。我真的是一个css初学者，并且已经检查了各种来源，如果我能自己找到解决方案，我不会发布。任何帮助都会很感激，但是第三个div也会与第二个div对齐，并且它不会使用剩余的宽度aks来提供帮助和解释。在第二个示例中，您需要提前知道宽度，这可能很棘手，如果使用display:inline块，则第二个div不会自动向右扩展（）。我试着用浮动技术制作一个简单的页面布局，也许flex是一个更好的选择。谢谢！非常有用的信息。因此，基本上，浮动元素实际上从流中移除（因此黄色背景跨越，就好像第一个元素不存在一样），但它通过移动其内容来影响后续元素，从而使其具有空间。