Question

我以为clear:both应该清除所有浮动元素的两侧，所以当我在C框上都使用clear：时，为什么它的右侧仍然有D，E，F？

.bigbox {
  border: 2px blue solid;
  width: 80px;
  height: 80px;
}

.box {
  background-color: beige;
  color: black;
  height: 15px;
  width: 15px;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

.float {
  float: left;
}

.clearboth {
  clear: both;
}

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' type='text/css' href='style.css'>
</head>

<body>
  <div class="bigbox">
    <div class="box float">A</div>
    <div class="box float">B</div>
    <div class="box float clearboth">C</div>
    <div class="box float">D</div>
    <div class="box float">E</div>
    <div class="box float">F</div>
    <div class="box float">G</div>
  </div>
</body>

</html>

Answer 1

元素上的
clearboth仅清除文档中的浮点数订购。它不会清除之后的浮点数。左右值元素前面的左浮子和右浮子的平均游隙分别。它们并不意味着清理前后的浮子元素。

您可以在要清除的div中添加clearboth类。

如果您要降低D，E和F的大小，请将{{1}}类添加到D。

CSS清除：双方都不清除吗？

1 个答案: