CSS 布局 - float 和 clear
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;
}
自己动手试一试 »
