非浮动 div 的内部文本相对于前一个浮动 div 定位答案

【问题标题】：Inner text of non float div is positioned regarding to previous float div非浮动 div 的内部文本相对于前一个浮动 div 定位
【发布时间】：2016-02-05 21:24:53
【问题描述】：

我的问题是为什么在下面的 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/

据我了解浮动描述，红色和蓝色框取自正常流程，所以应该忽略绿色框为什么要计算它们的位置。

【问题讨论】：

为.green 类添加clear: left，因为前一个div 的float 正在影响其行为。

标签： html css css-float

【解决方案1】：

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

现在，关于清除属性。它能做什么。如果您添加属性 clear:both，则该元素的两侧（左/右）都会变得清晰，并且会占用页面上的全部可用空间。如果只使用 clear: left（根据要求右）它会在左侧清除空间并利用全部空间。

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

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

【讨论】：