clear
CSS 屬性指定一個元素是否必須移動(清除浮動後)到在它之前的浮動元素下面。clear
屬性適用於浮動和非浮動元素。
當應用於非浮動塊時,它將非浮動塊的邊框邊界移動到所有相關浮動元素外邊界的下方。這個非浮動塊的垂直外邊距會摺疊。
另一方面,兩個浮動元素的垂直外邊距將不會摺疊。當應用於浮動元素時,它將元素的外邊界移動到所有相關的浮動元素外邊框邊界的下方。這會影響後面浮動元素的佈局,後面的浮動元素的位置無法高於它之前的元素。
要被清除的相關浮動元素指的是在相同塊級格式化上下文中的前置浮動。
注意:如果一個元素裏只有浮動元素,那它的高度會是
0
。如果你想要它自適應即包含所有浮動元素,那你需要清除它的子元素。一種方法叫做clearfix
,即clear
一個不浮動的::after
僞元素。
#container::after {
content: "";
display: block;
clear: both;
}
語法
/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Global values */
clear: inherit;
clear: initial;
clear: unset;
值
none
元素不會向下移動清除之前的浮動。
left
元素被向下移動用於清除之前的左浮動。
right
元素被向下移動用於清除之前的右浮動。
both
元素被向下移動用於清除之前的左右浮動。
inline-start
該關鍵字表示該元素向下移動以清除其包含塊的起始側上的浮動。即在某個區域的左側浮動或右側浮動。
inline-end
該關鍵字表示該元素向下移動以清除其包含塊的末端的浮點,即在某個區域的右側浮動或左側浮動。
Formal syntax
none | left | right | both | inline-start | inline-end
示例
clear: left
HTML
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="left">This paragraph clears left.</p>
</div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.left {
border: 1px solid black;
clear: left;
}
.black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
在 CodePen 中打開 在 JSFiddle 中打開
clear: right
HTML
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="right">This paragraph clears right.</p>
</div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.right {
border: 1px solid black;
clear: right;
}
.black {
float: right;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
在 CodePen 中打開 在 JSFiddle 中打開
clear: both
HTML
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="both">This paragraph clears both.</p>
</div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.both {
border: 1px solid black;
clear: both;
}
.black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 45%;
}