css浮動屬性簡介

css浮動屬性

1：浮動：顧名思義就是讓元素漂浮起來。且從我們的視角看去頁面並沒有發生任何變化。如圖所示：

該圖為乙個網頁，我們直面看上去，是看不出頁面上是否有浮動的。但當我們從側面看上去時，浮動就很明顯了。

如圖所示:很明顯的就能看出網頁部分1，網頁部分2是不浮動的，他們兩處在同乙個平面上。而網頁部分3明顯浮動於網頁上方，但是從我們的視角去看卻並沒有變化。

2：浮動屬性的書寫方式： float：；它具有三種屬性值書寫方式分別為：

float：left；左浮動

float：right；右浮動

float：none；沒有浮動

3:浮動屬性的作用：在文件流中塊狀元素是自上而下的顯示順序，內聯元素是自左而右的顯示順序。而在網頁中需要讓一些上下排列的元素變成左右的排列順序，這就需要用到浮動屬性。

作用：讓上下排列的元素可以併排顯示。左浮動會使浮起來的元素自左向右排列為一排，右浮動會使浮起來的元素自右向左依次排列為一排。如果有n個元素要在一排並列顯示，那麼n個元素都需要新增浮動屬性。且新增浮動屬性後，元素對margin：0 auto；不生效。

4：浮動顯示規則：元素新增浮動之後，就漂浮起來了，原本在標準文件流利的位置就不再占有了，後面的內容會把位置補上去，漂浮起來的元素會遮擋部分補上的元素。但是文字是不會被遮擋的，這就形成了文字環繞的模式。如下圖所示：

浮動物件會向左或者向右移動遇到邊框（border），填充（padding），外邊界（margin）或者另一塊元素為止。

當上一塊元素漂浮起來時，會使下乙個元素頂上原來的位置，會致使下個元素被遮擋，這時就需要為下個元素新增清除浮動屬性，以防止其受到影響。清除浮動屬性書寫方式：clear：；其有四個屬性值，分別為：none：不清除

left：清除左浮動

right：清除右浮動

both：清除兩側浮動

注：清除浮動屬性，只針對於自身起作用，對其他元素是沒有影響的。且清除浮動屬性，不是給浮動的元素加的，而是給受了浮動影響的元素加的。