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 解决这个问题:
.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: auto
clearfix 就可以很好地工作(否则您 可能会看到滚动条)。这 然而,新的、现代的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
伪元素的更多信息。