如何在css中設置浮動

本篇文章為大家展示了如何在css中設置浮動，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

在css中，可以使用float屬性來設置浮動。

float屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

基本語法格式：

選擇器{float:屬性值;}

• left 元素向左浮動

• right 元素向右浮動

• none 元素不浮動

css浮動是一種使元素脫離普通標準流控制的方法，會使元素向左或向右移動，其周圍的元素也會重新排列。

浮動是一種非常有用的布局方式，它能夠改變頁面中對象的前后流動順序。這樣做的好處是，使得內容的排版變的簡單，具有良好的伸縮性。

浮動是css布局非常強大的布局功能，也是理解CSS布局的關鍵問題所在，在CSS中，包括div在內的任何元素都可以浮動的方式顯示。

浮動可以讓設置了浮動屬性的元素脫離標準普通流的控制，移動到其父元素中指定位置。

浮動的性質

浮動是css里面布局用的最多的屬性。

現在有兩個div，分別設置寬高。我們知道，它們的效果如下：

此時，如果給這兩個div增加一個浮動屬性，比如float: left;，效果如下：

這就達到了浮動的效果。此時，兩個元素并排了，并且兩個元素都能夠設置寬度、高度了（這在上一段的標準流中，不能實現）。

浮動想學好，一定要知道三個性質。接下來講一講。

性質1：浮動的元素脫標

脫標即脫離標準流。我們來看幾個例子。

證明1：

上圖中，在默認情況下，兩個div標簽是上下進行排列的?，F在由于float屬性讓上圖中的第一個<div>標簽出現了浮動，于是這個標簽在另外一個層面上進行排列。而第二個<div>還在自己的層面上遵從標準流進行排列。

證明2：

上圖中，span標簽在標準流中，是不能設置寬高的（因為是行內元素）。但是，一旦設置為浮動之后，即使不轉成塊級元素，也能夠設置寬高了。

所以能夠證明一件事：一旦一個元素浮動了，那么，將能夠并排了，并且能夠設置寬高了。無論它原來是個div還是個span。所有標簽，浮動之后，已經不區分行內、塊級了。

性質2：浮動的元素互相貼靠

我們來看一個例子就明白了。

我們給三個div均設置了float: left;屬性之后，然后設置寬高。當改變瀏覽器窗口大小時，可以看到div的貼靠效果：

上圖顯示，3號如果有足夠空間，那么就會靠著2號。如果沒有足夠的空間，那么會靠著1號大哥。
如果沒有足夠的空間靠著1號大哥，3號自己去貼左墻。

不過3號自己去貼墻的時候，注意：

上圖顯示，3號貼左墻的時候，并不會往1號里面擠。

同樣，float還有一個屬性值是right，這個和屬性值left是對稱的。

性質3：浮動的元素有“字圍”效果

來看一張圖就明白了。我們讓div浮動，p不浮動。

上圖中，我們發現：div擋住了p，但不會擋住p中的文字，形成“字圍”效果。

總結：標準流中的文字不會被浮動的盒子遮擋住。（文字就像水一樣）

關于浮動我們要強調一點，浮動這個東西，為避免混亂，我們在初期一定要遵循一個原則：永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。

性質4：收縮

收縮：一個浮動的元素，如果沒有設置width，那么將自動收縮為內容的寬度（這點非常像行內元素）。

舉例如下：

上圖中，div本身是塊級元素，如果不設置width，它會單獨霸占整行；但是，設置div浮動后，它會收縮

浮動的補充（做網站時注意）

上圖所示，將para1和para2設置為浮動，它們是div的兒子。此時para1+para2的寬度小于div的寬度。效果如上圖所示?？扇绻O置para1+para2的寬度大于div的寬度，我們會發現，para2掉下來了：

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

上述內容就是如何在css中設置浮動，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。