CSS 布局 - clear 和 clearfix

clear 屬性

clear 屬性指定哪些元素可以浮動于被清除元素的旁邊以及哪一側。

clear 屬性可設置以下值之一：

  • none - 允許兩側都有浮動元素。默認值
  • left - 左側不允許浮動元素
  • right- 右側不允許浮動元素
  • both - 左側或右側均不允許浮動元素
  • inherit - 元素繼承其父級的 clear 值

使用 clear 屬性的最常見用法是在元素上使用了 float 屬性之后。

在清除浮動時，應該對清除與浮動進行匹配：如果某個元素浮動到左側，則應清除左側。您的浮動元素會繼續浮動，但是被清除的元素將顯示在其下方。

下例將清除向左的浮動。表示在（div 的）左側不允許出現浮動元素：

實例

div {
  clear: left;
}

親自試一試

clearfix Hack

如果一個元素比包含它的元素高，并且它是浮動的，它將“溢出”到其容器之外：

然后我們可以向包含元素添加 overflow: auto;，來解決此問題：

實例

.clearfix {
  overflow: auto;
}

親自試一試

只要您能夠控制外邊距和內邊距（否則您可能會看到滾動條），overflow: auto clearfix 就會很好地工作。但是，新的現代 clearfix hack 技術使用起來更安全，以下代碼被應用于多數網站：

實例

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

親自試一試

您將在稍后的章節學到 ::after 偽元素。