clear

 clear CSS 属性指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
clear: inherit;

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

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

/* best practical*/
/* old */
.clearfix:before, .clearfix:after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}
/* new */
.clearfix::before, .clearfix::after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}
/* new clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
/* old clearfix */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

语法

Formal syntax: none | left | right | both | inline-start | inline-end

clear: none
clear: left
clear: right
clear: both
clear: inherit

值

none

元素不会向下移动清除之前的浮动。

left

元素被向下移动用于清除之前的左浮动。

right

元素被向下移动用于清除之前的右浮动。

both

元素被向下移动用于清除之前的左右浮动。

inline-start 

inline-start是一个关键字，表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。

inline-end 

inline-end是一个关键字，表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

示例

clear: left

HTML Content

<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 Content

.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 Content

<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 Content

.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 Content

<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 Content

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

Specifications

浏览器兼容性

参见

• 盒模型