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然后它清除了它的左侧，但是在这一侧发现了元素红色，所以它被移动到屏幕上全尺寸的新线上并且由于完整的尺寸。格力，.blue在它下面添加。

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

非浮点div的内部文本位于前一个浮点div

1 个答案: