clear

2 位贡献者:

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

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

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

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

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

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

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

语法

Formal syntax: none | left | right | both
clear: none
clear: left
clear: right
clear: both

clear: inherit

none
元素不会向下移动清除之前的浮动。
left
元素被向下移动用于清除之前的浮动。
right
元素被向下移动用于清除之前的右浮动。
both
元素被向下移动用于清除之前的左右浮动。

示例

查看在线演示

h1 { clear: none }
h2 { clear: right }

Specifications

Specification Status Comment
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

参见

文档标签和贡献者

向此页面作出贡献: sartrey, Hey-Ray
最后编辑者: sartrey,