clear

大clearCSS属性指定元素是否可以位于浮元素之前或必须向下移动%28清除%29低于它们。大clear属性同时适用于浮动元素和非浮动元素。

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

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

当应用到非浮动块时，它将向下移动元素的边界边缘，直到它低于所有相关浮动的边缘边缘。这个运动（当它发生的时候）导致保证金崩溃不会发生。

应用于浮动元素时，会将元素的边缘边缘移到所有相关浮动边缘的边缘之下。这影响了后来的浮动物的位置，因为后来的浮动物不能放在比以前更高的位置。

要清除的浮动块是在同一个块格式上下文中的较前的浮动块。

注意：如果一个元素仅包含浮动元素，则其高度折叠为空。如果你想要它总是能够调整大小，所以它里面包含浮动元素，你需要自己清理它的子项。这就是所谓的clearfix，一种方法是将clear其替换为::after伪元素。

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

语法

值

none是一个关键字，指示元素是不向下移动以清除过去的浮动元素。

left是一个关键字，指示元素向下移动以清除过去。左浮标。

right是一个关键字，指示元素向下移动以清除过去。右浮标。both是一个关键字，指示元素向下移动以清除过去。双双左右浮动。

inline-start是一个关键字，指示元素向下移动以清除上的浮动。其包含块的起始侧，那就是左在ltr脚本和右在RTL脚本上浮动。

inline-end是一个关键字，指示元素向下移动以清除上的浮动。其包含块的端部，那就是右在ltr脚本和左在RTL脚本上浮动。

形式语法

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: red;
  width:20%;
}
p {
  width: 50%;
}

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: red;
  width:20%;
}
p {
  width: 50%;
}

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: red;
  width:20%;
}
p {
  width: 45%;
}

规范

浏览器兼容性