Skip to main content

CSS 属性 - clear

Docs

clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的顶部外边距会折叠。

另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将底部元素的外边界边缘移动到所有相关的浮动元素外边界边缘的下方。这会影响后面浮动元素的布局，因为后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动。

  • clear 属性是做什么的呢？
  • clear 属性可以指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面;
  • clear 的常用取值
    • left：要求元素的顶部低于之前生成的所有左浮动元素的底部
    • right：要求元素的顶部低于之前生成的所有右浮动元素的底部
    • both：要求元素的顶部低于之前生成的所有浮动元素的底部
    • none：默认值，无特殊要求
  • 那么我们可以利用这个特性来清除浮动。
备注

如果一个元素里只有浮动元素，那它的高度会是 0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做 clearfix，即 clear 一个不浮动的 ::after 伪元素。

#container::after {
  content: "";
  display: block;
  clear: both;
}

值​

  • none：元素不会被向下移动以清除浮动。
  • left：元素被向下移动以清除左浮动。
  • right：元素被向下移动以清除右浮动。
  • both：元素被向下移动以清除左右浮动。
  • inline-start：元素被向下移动以清除其包含块的起始侧浮动，即 ltr 时清除左浮动，rtl 时清除右浮动。
  • inline-end：元素被向下移动以清除其包含块的结束侧浮动，即 ltr 时清除右浮动，rtl 时清除左浮动。
/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: unset;

语法​

clear =
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  none

规范​

CSS 2 (w3c.github.io)