CSS 布局 - 浮动

CSSfloat属性指定元素应如何浮动。

CSSclear属性指定哪些元素可以浮动在已清除元素旁边以及在哪一侧。

浮动属性

这个float属性用于定位和格式化内容，例如让图片向左浮动到容器中的文本。

这个float属性可以具有以下值之一：

left- 元素浮动到其容器的左侧
right- 元素浮动到其容器的右侧
none- 元素不浮动（将仅显示在文本中出现的位置）。这是默认的
inherit- 元素继承其父元素的浮点值

在最简单的使用中，float属性可用于将文本环绕图片。

示例 - 浮动：右；

以下示例指定图片应浮动到正确的在文字中：

Pineapple Lorem ipsum dolor sat amet，consectetur adipiscing elit。 Phasellus imperdiet、nulla et dictum interdum、nisi lorem egestas odio、vitae scelerisque enim ligula venenatis dolor。 Maecenas nisl est、ultrices nec congue eget、auctor vitae Massa。Fusce luctus 前庭augue ut aliquet。 Mauris ante ligula，facilisis sed ornare eu，lobortis in iodio。 Praesent convallis urna a lacus interdum ut hendrerit risus congue。 Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

示例

img {
float: right;
}

亲自试一试 »

示例 - 浮动：向左；

以下示例指定图片应浮动到左边在文字中：

示例

img {
float: left;
}

亲自试一试 »

示例 - 无浮动

在以下示例中，图片将显示在文本中出现的位置（float: none;）：

示例

img {
float: none;
}

亲自试一试 »

示例 - 彼此相邻浮动

通常 div 元素会显示在彼此之上。但是，如果我们使用float: left我们可以让元素彼此相邻浮动：

示例

div {
float: left;
padding: 15px;
}

.div1 {
background: red;
}

.div2 {
background: yellow;
}

.div3 {
background: green;
}

亲自试一试 »