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

Initial value	none
应用对象	block-level elements
是否可继承	no
媒体	visual
计算值	as specified
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

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

形式语法

none | left | right | both | inline-start | inline-end

实例

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

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

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

规范

Specification	Status	Comment
CSS Logical Properties Level 1The definition of 'float and clear' in that specification.	Editor's Draft	Adds the values inline-start and inline-end
CSS Level 2 (Revision 1)The definition of 'clear' in that specification.	Recommendation	No significant changes, though details are clarified.
CSS Level 1The definition of 'clear' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	4.0	3.5	1.0
inline-start, inline-end	No support	No support	55 (55)	No support	No support	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	Firefox OS	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1)	1.0	6.0	6.0	1.0
inline-start, inline-end	No support	No support	55.0 (55)	2.5	No support	No support	No support