非浮动div的内部文本是关于以前的浮动div位置

Question

我的问题是为什么在下面的HTML/CSS代码“绿色”文本是绿色框外。水平放置在绿色框内，垂直放置在红色框下方。为什么蓝盒子被垂直放置下方绿框，不低于红皮：

HTML：

<div class="red">Red</div> 
<div class="green">Green</div> 
<div class="blue">Blue</div> 

CSS：

.red { 
    width: 25%; 
    height: 50px; 
    float: left; 
    border-color: red; 
    border-width: 1px; 
    border-style: solid; 
    color: red; 
} 

.green { 
    width: 18%; 
    height: 40px; 
    border-color: green; 
    border-width: 1px; 
    border-style: solid; 
    text-align: center; 
    color: green; 
} 

.blue { 
    width: 20%; 
    height: 50px; 
    float: left; 
    border-color: blue; 
    border-width: 1px; 
    border-style: solid; 
    color: blue; 
} 

https://jsfiddle.net/3tk7Lwbj/1/

由于我懂浮法描述中，红色和蓝色框从正常流程中取出，因此为了计算它们的位置，应该忽略绿色框。

Answer 1

@vivekkupadhyay给出的解决方案是正确的。当你将css的float属性应用到任何块级元素时，它会在屏幕上浮动，而不占用页面上的空间。因此，在浮动元素之间或之后添加的任何元素，都会添加到它们后面。

现在，关于明确的财产。它能做什么。如果你添加属性clear：both，那么该元素的双方（左/右）将变得清晰，并且它将在页面上获得完整的可用空间。如果只使用clear：left（按需求右移），则清除左侧的空间并利用全部空间。

在.green类的情况下，当您添加属性clear：left时，它将清除其左侧，但在此处发现元素为红色，因此它会在屏幕上以全尺寸在新行上移动，并且由于.gree，.blue在它下面添加。

希望我已经添加了足够的细节来清除您的问题。