CSS 布局 - 浮动和清除
CSS float 属性指定元素如何浮动。
CSS clear 属性指定哪些元素可以浮动在清除元素旁边以及在哪个侧面。
float 属性
float 属性用于定位和格式化内容，例如让图像在容器中的文本左侧浮动。
float 属性可以具有以下值之一
-
left- 元素浮动到其容器的左侧 -
right- 元素浮动到其容器的右侧 -
none- 元素不浮动（将显示在其在文本中出现的位置）。这是默认值 -
inherit- 元素继承其父元素的 float 值
在最简单的使用中，float 属性可用于使文本环绕图像。
示例 - float: right;
以下示例指定图像应在文本中向 **右侧** 浮动
Lorem ipsum dolor sit 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.
示例 - float: left;
以下示例指定图像应在文本中向 **左侧** 浮动
Lorem ipsum dolor sit 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.
示例 - 无浮动
在以下示例中，图像将显示在其在文本中出现的位置（float: none;）
Lorem ipsum dolor sit 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.
示例 - 并排浮动
通常，div 元素将彼此叠放。但是，如果我们使用 float: left，我们可以让元素并排浮动
示例
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
试试看 »
