CSS浮点溢出属性说明

我是CSS的新手。我开始探索CSS float属性。我在一个

容器中有两个
元素。两个
div
的宽度和高度相等

 <div class="container">
  <div class="one">
  </div>
  <div class="two">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
    </p>
  </div>
</div>

从上面我可以理解的是，由于浮动的div从正常流中移除并向左浮动，第二个div（包含
元素中的文本）在
.one
div下面合并。而且，由于两者具有相同的宽度和高度，我无法看到内容

但是，当我将
.two
的溢出属性设置为滚动时，我看到第二个div被放置在第一个div的旁边。这令人困惑。为什么会有这样的行为？请给我解释一下。链接到下面附加的codepen以了解更多详细信息。
这里发生的事情是因为：

.container{
  overflow:hidden;
}

发生了什么事？
您的浮动div希望在另一个div之前占用空间。因为非浮动div具有display:block，所以它需要一整行来渲染自己。浮动div向下推非浮动div，该div随后被上述样式隐藏。如果将“显示”更改为“内联块”，则它将使用“宽度”和“高度”特性仅占用所需的空间

下面是一个示例：
float CSS属性指定应从正常流中获取元素。但是，非浮动元素仍然采用包括浮动元素在内的所有可用宽度。但是如果您设置
溢出：auto或
隐藏
，然后它将与浮动元素对齐。见下面的演示，它应该解释清楚


.a1、.b1{
背景：rgba（0,0,0,5）；/*纯黑色，带alpha*/
宽度：50px；
高度：50px；
浮动：左；
}
.a2{
背景：石灰；
}
.b2{
背景：石灰；
溢出：自动；/*让浏览器决定是否剪辑*/
}
你好
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。


你好
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu.
感谢您的回答。我明白了。但我还有一个问题。在我的示例中，当我将
.two
div属性
溢出
设置为自动或滚动时，为什么第二个
div
会被放置在
一个
div旁边，而不将第二个
div
显示为内联？请把一些关于这方面的说明。更新的演示-使边境股票，看看它是否有助于你理解。这是一个非常令人困惑的话题。谢谢你的回答。我明白了。但我还有一个问题。在我的示例中，当我将.two div属性溢出设置为auto或scroll时，为什么第二个div会被放置在.one div的旁边，而没有将第二个div的显示设置为内联？这是float设计的基本内容，请看这个简单的演示-你可以阅读更多关于感谢快速演示链接的内容。但是当
overflow
属性可见时，为什么第二个div没有显示在第一个div的旁边。我在下面发布了一个答案，因为在注释中很难解释。太棒了。这就是我想再次确认的。谢谢你的解释。这里的技巧是，当溢出设置为自动或隐藏时，第二个div将与第一个div对齐。在您的问题演示中，您有
.container{overflow:hidden；}
，这使得文本不会溢出，所有两个框都位于同一位置，具有相同的固定大小。
.container{
  overflow:hidden;
}