MDN之Web 開發技術【clear屬性】

原文鏈接:https://blog.csdn.net/WuLex

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%;
}

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章