clear

概述

CSS clear属性指定：一个元素是紧挨着前面的浮动元素，还是必须移动到它们的下面（浮动被清除）。
clear属性既可以用于浮动元素，也可以用于非浮动元素。

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

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

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

#container: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 

Is a keyword indicating that the element is moved down to clear floats on start side of its containing block, that is the left floats on ltr scripts and the right floats on rtl scripts.

inline-end 

Is a keyword indicating that the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts.

示例

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

浏览器兼容性

参见

• 盒模型