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中学习float和clear，并且陷入了一个问题。当我分别浮动每个div时，浮动效果将如上例所示。当我浮动left1时，left2会按预期向上移动。但是为什么左2的孩子不向上移动呢？
我知道浮动元素已不可用->可能就是这个原因。
如果是这样，为什么在左2上执行overflow：hidden就像在左2上浮动一样（请参见下文）。
https://jsfiddle.net/0k02qsjw/2/
我需要帮助来了解这种情况下的情况。这可能是
Floating elements within a div, floats outside of div. Why?
但是我在那里没有找到我的具体问题的答案。
最佳答案
https://developer.mozilla.org/en-US/docs/Web/CSS/float
float CSS属性指定一个元素应从常规流中获取，并沿其容器的左侧或右侧放置，其中文本和行内元素将环绕该容器。
因此，当您浮动一个元素时，其他块元素不会在其周围浮动-相邻元素中的内联和文本元素会在其周围浮动。
如果您要浮动.left1，则.left2中的内容不会上升并环绕.left1，因为它们的宽度相同。 .left2的内联和文本内容必须比.left1宽，以便能够环绕.left1。您可以通过将width的.left2设置为200px来查看。 https://jsfiddle.net/0k02qsjw/3/
关于html - 为什么 float 容器div的非 float 子代不 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42984296/