Question

我试图理解浮动和清除。我有左浮动的DIV，然后清除了

元素。

.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
}


.text-clear {
  clear: right;
  
  background-color: red;
}

<div class='container'>
  <div class='left-segment'>I am LEFT DIV</div>
  
  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>

它按预期工作。 P元素占用div左浮点的空白空间。

但是现在我尝试为P元素增加宽度，P元素正好出现在下方，以浮动DIV

示例-

.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
}


.text-clear {
  clear: right;
  background-color: red;
  width: 200px;
}

<div class='container'>
  <div class='left-segment'>I am LEFT DIV</div>
  
  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>

为什么宽度影响清晰？

Answer 1

首先，在这里使用clear毫无用处，因为您正在清除权利并且您已经使用过float:left。因此，如果您清除该清除，您将获得相同的输出。

为了更好地了解正在发生的事情，让我们将float元素变得透明一些：

.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
  opacity: 0.5
}

.text-clear {
  background-color: red;
  width: 200px;
  margin: 0; /*let's remove margin to avoid confusion*/
}

<div class='container'>
  <div class='left-segment'>I am LEFT DIV</div>

  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>

您会看到红色div从容器顶部开始，而不是您可能认为的浮动元素下方。如果我们参考the documenation，我们可以看到：

float CSS属性指定应放置一个元素沿其容器的左侧或右侧，允许文本和 内联元素将其环绕。该元素已从网页的正常流程，尽管仍然是流程的一部分（与绝对定位相反）。

因此，仅文本将环绕float元素，而不环绕整个block元素。换句话说，您的红色div以200px的宽度放置在容器的开头，然后float元素位于其上方，并且将文本推到底部，因为它不能再将其推到左侧

让我们添加一个动画，我们将更好地了解正在发生的事情：

.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
  opacity: 0.5
}

.text-clear {
  background-color: red;
  width: 200px;
  margin: 0;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {width:600px}
  to {width:100px}
}

<div class='container'>
  <div class='left-segment'>I am LEFT DIV</div>

  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>

现在更加清楚的是，文本是如何围绕浮点数包装的，并尊重其容器的宽度。

现在，如果您清除左侧，则可以正确清除float元素，红色div将在其下方开始：

.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
  opacity: 0.5
}

.text-clear {
  clear: left;
  background-color: red;
  width: 200px;
  margin: 0;
  animation: change 5s linear infinite alternate;
}

@keyframes change {
  from {width: 600px}
  to {width: 100px}
}

<div class='container'>
  <div class='left-segment'>I am LEFT DIV</div>

  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>

宽度属性是否影响清晰？

1 个答案: