时间戳

首页 > 解决方案 > CSS clear：两者都不清除双方？

html - CSS clear：两者都不清除双方？

问题描述

我clear:both想清除任何浮动元素的两侧，当我在盒子 C 上使用 clear:both 时，为什么它的右侧仍然有 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>

标签： htmlcss

解决方案

clear在一个元素上只清除它之前的浮动以文档顺序。它不会清除它之后的浮动。left 和 right 值分别表示元素之前的左浮动和右浮动的间隙。它们并不意味着在元素之前和之后清除浮动。

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

在您的情况下，如果您想降低 D、E 和 F。将您的clearboth课程添加到 D。

推荐阅读