https://jsfiddle.net/0k02qsjw/1/
.left1 {
background-color:red;
width:100px;
height:100px;
float:left;
}
.left2 {
background-color:blue;
width:100px;
height:100px;
}
// left3 left4类似于left2。小提琴
<div class="left1">Div1</div>
<div class="left2">Div2child</div>
<div class="left3">Div3</div>
<div class="left4">Div4</div>
我在css中学习浮动和清除，并且遇到了一个问题。当我单独浮动每个div时，Float在上面的示例中按预期工作。当我向左移动时，left2按预期向上移动。但为什么左边的孩子不会向上移动？
据我所知，浮动元素不流动 - ＆gt;这可能是原因。 如果是这样，为什么溢出：隐藏在left2上的工作就像left2被浮动一样（见下文） https://jsfiddle.net/0k02qsjw/2/
我需要帮助来理解这种情况下发生的事情。这可能是
的副本Floating elements within a div, floats outside of div. Why?
但我在那里找不到我具体问题的答案。
答案 0 :(得分：2)
https://developer.mozilla.org/en-US/docs/Web/CSS/float
浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。
因此，当您浮动元素时，其他块元素不会浮动它 - 相邻元素中的内联元素和文本元素会在其周围浮动。
如果您正在浮动.left1，则.left2中的内容不会上升并环绕.left1，因为它们的宽度相同。 .left2需要比.left1宽，因为它的内联和文字内容能够包裹.left1。您可以通过将width的{{1}}设置为.left2来查看此内容。 https://jsfiddle.net/0k02qsjw/3/