CSS float样式

CSS float 属性规定元素如何浮动，根据设置的值，会使元素向左或向右移动，其周围的元素也会重新排列。

float 属性

我们来看下float的常用值：

• left – 元素浮动到其容器的左侧
• right – 元素浮动在其容器的右侧
• none – 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit – 元素继承其父级的 float 值。

float往往在布局时会用到，常见的例如图像位置。

float:left

使用float:left的元素基于水平方向靠左浮动，浮动元素之后的元素会围绕它。

示例：

img{
	float:left;
}

试一试

float:right

使用float:right的元素基于水平方向靠右浮动，浮动元素之后的元素会围绕它。

示例：

img{
	float:right;
}

试一试

清除浮动 – 使用 clear

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

clear 属性指定元素两侧不能出现浮动元素。clear的属性值有以下内容：

• left 在左侧不允许浮动元素。
• right 在右侧不允许浮动元素。
• both 在左右两侧均不允许浮动元素。
• none 默认值。允许浮动元素出现在两侧。
• inherit 规定应该从父元素继承 clear 属性的值。

使用 clear 属性示例如下：

.text_line
{
    clear:both;
}

试一试

更多示例

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

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

标题和图片向右侧浮动

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

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

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

创建一个没有表格的网页

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