Html 这是为什么<；部门>；元素-浮动-突然；“水槽”；当我给它一个宽度？

我有一个简单的HTML片段，它定义了一个

div.main\u col

元素，它获取属性

float:left

我想分配
float:left到这个
div.main\u col
将导致在它之后定义的元素与它并排，即使这些后续元素是
显示：block
-这就是
浮动的点对吗？

（当然，假设视口中还有足够的空间让新元素与
div.main\u col
并排放置）

这是我的密码

<div class="main_col">
            <h1>Leela's gonna kill me.</h1>
            <p>Good news, everyone! There's a report on TV with some very bad news! I'm
            sure those windmills will keep them cool. Ah, the 'Breakfast Club'
        soundtrack! I can't wait til I'm old enough to feel ways about stuff!</p>
</div>
<div class="floatee">
  <h3>float me</h3>
  <img src="http://lorempixel.com/80/80" alt="" />
</div>

确实如此，正如您可以从第二个div中看到的，它与第一个div一起浮动。

但是，如果我简单地将
div.floote
元素的宽度设置为
100px
，它会突然停止浮动，现在“下沉”到文档底部。

请访问此处查看：。

即使
div.floote
元素有足够的空间放在它旁边，它仍然会下沉

当我在元素
上设置宽度时，为什么元素会突然下沉？

注意：我知道通过删除宽度或将其自身样式设置为浮动，我可以使
再次浮动，但我想了解是什么导致了这种情况？
检查下面
示例-1
中的代码示例，即，当您仅定义
宽度
而没有任何
值时，将
值分配给它，然后默认情况下
它采用
宽度
的
100%查看端口宽度
，但在
示例2中
中，当您定义或分配
宽度
的值时，它
会收缩
以分配
宽度

示例-1

<div>
<p>
Good news, everyone! There's a report on TV with some very bad news! I'm
            sure those windmills will keep them cool. Ah, the 'Breakfast Club'
        soundtrack! I can't wait til I'm old enough to feel ways about stuff!
</p>
</div>
div{
  background:#f22;
} 



各位，好消息！电视上有一篇报道，里面有一些非常坏的消息！我是
当然那些风车会让他们保持凉爽。啊，早餐俱乐部
原声带我迫不及待地想，直到我长大了，对事物有了感觉！

div{
背景：#f22；
} 

示例-2

div{
    width:100px;
    background:#f22;
} 

<div>
<p>
Good news, everyone! There's a report on TV with some very bad news! I'm
            sure those windmills will keep them cool. Ah, the 'Breakfast Club'
        soundtrack! I can't wait til I'm old enough to feel ways about stuff!
</p>
</div>

div{
宽度：100px；
背景：#f22；
} 

各位，好消息！电视上有一篇报道，里面有一些非常坏的消息！我是
当然那些风车会让他们保持凉爽。啊，早餐俱乐部
原声带我迫不及待地想，直到我长大了，对事物有了感觉！


我想分配浮动：左；对这个部门来说，主要原因是
在它之后定义的元素将与它并排放置，即使
后续元素显示为：块

那是你的误解。浮球div不是坐在它旁边，而是重叠在它上面。浮动div内的行框避免浮动的主列，而不是div本身

因此，当浮动div的宽度小于主列的宽度时，浮动div内没有空间供行框移动，这将避开主列div，直到第一个行框可以放置在主列div下方。因此浮动div的高度增加，其内容位于主列下方。
这是正确的答案，有关更多信息，请参见块格式上下文上的规范：好的，我现在明白了，一旦您了解框是重叠的，浮动框上的宽度实际上是-在正常流动中-因此减小其宽度基本上会挤出线框，这是非常明显的。保罗提供的链接很有用，也很有用。谢谢
div{
    width:100px;
    background:#f22;
} 

<div>
<p>
Good news, everyone! There's a report on TV with some very bad news! I'm
            sure those windmills will keep them cool. Ah, the 'Breakfast Club'
        soundtrack! I can't wait til I'm old enough to feel ways about stuff!
</p>
</div>