clear

 

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

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

clear: inherit;

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

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

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

注释:如果你想要一个元素将所有浮动元素包含在内,你既可以将这个容器设置为浮动,又可以通过 ::after 伪元素设置clear属性作为替代。

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

初始值none
适用元素block-level elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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.

示例

Note:  The div with 'wrapper' class add a border for a better visility of the utility of clear property

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

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

参见

文档标签和贡献者

 最后编辑者: xgqfrms-GitHub,