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;
}
自己動手試一試 »
