教你玩轉CSS Float（浮動）

什麼是 CSS Float（浮動）？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會從新排列。

Float（浮動），每每是用於圖像，但它在佈局時同樣很是有用。

元素怎樣浮動

元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。

一個浮動元素會盡可能向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

浮動元素以後的元素將圍繞它。

浮動元素以前的元素將不會受到影響。

若是圖像是右浮動，下面的文本流將環繞在它左邊：

    img {
        float:right;
    }

彼此相鄰的浮動元素

若是你把幾個浮動的元素放到一塊兒，若是有空間的話，它們將彼此相鄰。

在這裏，咱們對圖片廊使用 float 屬性：

    .thumbnail {
        float:left;
        width:110px;
        height:90px;
        margin:5px;
    }

清除浮動 - 使用 clear

元素浮動以後，周圍的元素會從新排列，爲了不這種狀況，使用 clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

使用 clear 屬性往文本中添加圖片廊：

    .text_line {
        clear:both;
    }

CSS 中全部的浮動屬性

「CSS」 列中的數字表示不一樣的 CSS 版本（CSS1 或 CSS2）定義了該屬性。

屬性	描述	值	css
clear	指定不容許元素周圍有浮動元素	left right both none inherit	1
float	指定一個盒子（元素）是否能夠浮動	left right none inherit	1