W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 浮动(Float) 与 清除(Clear)



float 属性指定一个元素是否应该浮动。

clear 属性用于控制浮动元素的行为。





float(浮动) 属性

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

在这里,我们对图片廊使用 float 属性:

Example

img {
    float: right;
    margin: 0 0 10px 10px;
}
尝试一下 »

clear(清除) 属性

clear 属性用于控制浮动元素的行为。

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

clear 属性指定浮动元素的边不允许浮动:

Example

div {
    clear: left;
}
尝试一下 »

overflow: auto;

如果一个元素比包含它的元素高,并且它是浮动的,它会溢出到外部。

我们可以添加 overflow: auto; 去包含元素以解决这个问题:

Example

.clearfix {
    overflow: auto;
}
尝试一下 »

网页布局的例子

使用 float 属性来完成整个web布局是很常见的:

Example

div {
    border: 3px solid blue;
}

.clearfix {
    overflow: auto;
}

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
}

section {
    margin-left: 206px;
    border: 3px solid red;
}
尝试一下 »

Examples

更多实例

为图像添加边框和边距并浮动到段落的左侧

让我们为图像添加边框和边距并浮动到段落的左侧

标题和图片向右侧浮动

让标题和图片向右侧浮动。

让段落的第一个字母浮动到左侧

改变样式,让段落的第一个字母浮动到左侧。

创建一个没有表格的网页

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。


所有CSS Float 属性

属性 描述
clear 指定不允许元素周围有浮动元素
float 指定一个盒子(元素)是否可以浮动
overflow 属性规定当内容溢出元素框时发生的事情
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话
overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话