CSS 布局 - 清晰和clearfix


目录

    显示目录


CSS 属性 clear

当我们使用 float 属性时,我们想要 下面的下一个元素(不在右侧或左侧),我们必须使用 clear 财产。

clear 属性指定什么 应该发生在浮动元素旁边的元素上。

clear 属性可以具有以下之一 以下值:

none

- 元素不会被推到左或右浮动元素下方。这是默认的

left

- 元素被推到左浮动元素下方

right

- 元素被推到右浮动元素下方

both

- 元素被推到左右浮动元素下方

inherit

- 该元素从其父元素继承明确的值

清除浮动时,应该将清除与浮动相匹配:如果一个元素 向左浮动,那么你应该向左清除。你的浮动元素 将继续浮动,但清除的元素将出现在网页上的下方 页。

例子

此示例清除左侧的浮动。这里,它的意思是 元素被推到左侧浮动 元素下方:

div1 {
  float: left;
}
div2 {
  clear: left;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>



清除修复黑客

如果浮动元素比包含元素高,则它 将“溢出”到其容器之外。然后我们可以添加一个clearfix hack 解决这个问题:

Without Clearfix

With Clearfix

例子

.clearfix {
  overflow: auto;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>


只要您能够控制边距和填充,overflow: autoclearfix 就可以很好地工作(否则您 可能会看到滚动条)。这 然而,新的、现代的clearfix hack使用起来更安全,并且大多数网页都使用以下代码:

例子

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>


您将在后面的章节中了解有关 ::after 伪元素的更多信息。