为什么浮动右元素不能一直到顶部？

Question

我知道，发生这种情况，而是想说明为什么，因为我想更好地了解浮技工

鉴于这种HTML

<div class="wrapper"> 
    <div class="inner first">1</div> 
    <div class="inner second">2</div> 
    <div class="inner third">3</div> 
</div> 

和这个CSS

.wrapper { 
    width: 500px; 
    height: 500px; 
    margin: 100px auto; 
    border: 1px solid black; 
} 

.inner { 
    border: 1px solid black; 
    box-sizing: border-box; 
} 

.first, .second { 
    float: left; 
    width: 300px; 
    height: 300px; 
} 

.third { 
    width: 200px; 
    height: 200px; 
    float: right; 
} 

第三股利不浮动一路右上方，但与第二个div

对齐

我知道，发生这种情况，但我想更具体的解释，为什么（根据什么规则）

Answer 1

好问题，我已经看到了难以理解这部分人。根据你的问题，我觉得你想在框中将'3'对齐右上角。你的内心是500 * 500，你的第一个和第二个是300 * 300，因为它不能适应总共600个，第二个将低于第一个。然后第三个是200的空间。它将需要接下来的200个空间（第二个空间旁边），上面的空间不被利用。为了获得所需的输出，你想要的是如图所示的3向上移动，以便首先利用右上角200的空间。

可能这可以帮助你：

<div class="wrapper"> 
    <div class="inner third alg">3</div> 
    <div class="inner first">1</div> 
    <div class="inner second ">2</div> 
    </div> 

CSS代码：

.wrapper { 
    width: 500px; 
    height: 500px; 
    margin: 100px auto; 
    border: 1px solid black; 
} 

.inner { 
    border: 1px solid black; 
    box-sizing: border-box; 
} 

.first, .second { 
    float: left; 
    width: 300px; 
    height: 300px; 
} 

.alg{ 
    text-align: right; 
} 

.third { 
    width: 200px; 
    height: 200px; 
    float: right; 
} 

我希望这件事现在越来越清晰的给你。如果下面没有评论，我可以用更多的例子来解释。

Answer 2

这是因为float rules说

浮动框可能不会比由元件产生的前面任何block或floated箱的外顶更高的outer top源文件。

由于没有在.first右足够的空间，.second是位于下侧。但是，.third不能放在.second之上，即使它适合于.first剩下的可用空间。

Answer 3

这是因为页面流顺序。当你浮动一个元素时，你并不是完全从页面的流顺序中移除它，而是指定它应该将自己定位到元素的左边或右边。通过向右移动div三，就像完全放置div一样，您不会完全将其从流中移除。

在你的例子中，div one和two的宽度比父包装宽。这意味着它们不能内联，因此它们堆叠在一起。在前面的元素右边划分三个位置（div div），但仍受流动顺序的影响，并位于div div下方。