为什么<div>当我给它一个宽度时，这个漂浮的元素突然"sink"？

Question

我有一个简单的HTML片段，它定义了一个div.main_col元素，该元素获得属性float: left;
我认为将float: left;分配给这个div.main_col会导致在它之后定义的元素与它并排，即使这些后续元素是display: block——这就是float的意义所在，对吧
_{（当然，假设视口中还有足够的空间让新元素与div.main_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>

CSS

.main_col {
   width: 450px;
   float: left;
}
.floatee {
    /*   width: 100px; */
    background-color: pink;
}

可以肯定的是，正如您从这个codepen演示中看到的，第二个div与第一个div一起浮动
但是，如果我简单地将div.floatee元素的宽度设置为100px，它会突然停止浮动，现在"下沉"到文档的底部
在此查看：same代码笔如上所述，但带有".flootee"width: 100px
即使div.floatee元素有足够的空间放置在它旁边，它仍然会下沉。

为什么当我在元素<div class="floatee">上设置宽度时，它会突然下沉
注意：我知道我可以通过删除宽度或将其自己的样式设置为float来让<div class="floatee">再次float，但我想了解是什么导致了这种情况？

Answer 1

我想分配浮动：左；对这个div.main_col会导致在它之后定义的元素可以坐在它旁边，即使这些随后的元素被显示：块

那是你的误解。floatee-div并没有放在它旁边，而是与它重叠。floateediv内部的行框避开了floate-main.col，而不是div本身。

因此，当floatee-div的宽度小于main_col的宽度时，floatee-div内没有空间放置行框，这将避开main_div，直到第一个行框可以放置在main_coldiv下方。因此，floateediv的高度增加，其内容低于main_col。

Answer 2

查看下面的example-1中的代码示例，即当您只定义width而没有任何value assign时，通过default，它将取100% view-port width中的width，但在example-2中，当您为width定义或赋值时，shrinks将分配width。

示例-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;
} 

示例-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>