css中的浮動和定位

浮動和定位是css布局裡面的重要內容。相信很多人和我一樣，在初學的時候對這部分概念感到非常迷惑。我呢，就和大家分享一下經過一段時間學習的我對這部分知識的理解，希望可以對大家的學習起到幫助的作用。

先來說浮動。首先，我們要知道，我們的塊級框是根據其在文件（html文件）中的位置來定位的。這被我們稱之為文件流，或普通流。如圖：塊級框從上到下

乙個接乙個的垂直排列。

當我們給塊元素設定了浮動之後，這個元素就脫離了正常的文件流。打個比方，假設我們寫**是在蓋樓房，文件流就是第一層，浮動元素的話呢就是第二層。我們從上往下看，先看到的是浮動元素。但是，有一點需要注意的是，浮動元素其實並沒有完全脫離文件流。它一開始的定位還是要根據它在文件中的位置。這是什麼意思呢？

div2並沒有和我們想像的一樣漂浮起來，與div1重疊。而當div2向右浮動的時候，是這樣的：

這說明，當浮動元素之前有文件流中的塊級框時，浮動元素不能越過它，而在浮動元素之後的塊級框，則會無視浮動元素在文件中的存在，上公升佔據它的空間，這也就是我們通常理解的脫離文件流的元素存在時的體現，浮動元素不再影響不浮動的元素。按蓋樓的說法，則是先蓋了第二層，再蓋上第一層。

關於浮動元素表現的廢話說了這麼多，我們接下來應該講講怎麼清除浮動了。為什麼我們要清除浮動呢？假設有一張啊，你想讓它浮動到右邊，並且該包含在乙個有背景顏色的和邊框的元素中，如果我們不清除浮動，那麼背景的效果就不能展示出來。因為浮動了之後，容器就不能包裹住了，它們已經不再同一層了，因為希望根據的尺寸來合理的包裹，所以我們通常不會對容器進行寬高設定，所以這個時候的容器就是空的，我們不能看到它關於背景等的設定。要想看到效果，就要將浮動給清除。

用css來清除浮動主要有三種常用的方式。

第一種大家可能想到了，因為容器和浮動元素不在同一層所以不能正確包裹，那如果容器也浮動了，那不就可以包裹住了嗎？這個確實是其中一種方法。但是，這樣的話，後面元素的定位就會收到前面浮動元素的影響了。而對布局中所有元素都使用浮動的話，會造成浮動複雜化。所以我們應該還是要尋求一種能將容器撐開的方法。

第二種方法就是對浮動元素之後的某個元素應用clear。如果沒有的話，就需要增加乙個空元素，例如

或者是乙個空的div。當我們對元素應用clear時，css就會自動的在那個元素的頂部增加邊距（margin-top）,來使空出的空間能夠包裹住浮動元素。這可能會增加一些不必要的標籤。

第三種是對浮動的父元素應用overflow的hidden和auto屬。

overflow

應用這兩個屬性值時，它會自動的清除包含的所有浮動。

清除浮動的方法大致是這些。但是實際應用起來要考慮的比較多，也遠遠比我們說到的情況複雜。

定位在css中有三種：relative（相對定位）、absolute（絕對定位）、fixed（固定定位）。

當我們對乙個元素應用相對定位時，這個元素還是會出現在原來在文件流中的位置，我們可以對它應用：top、bottom、left、right等屬性對其進行移動，並且不會影響到文件流中其他元素的位置，但是也許會對其他塊級框有一定程度的遮擋。相當於是乙個元素就佔據的一層與二層，並且二層位置可以變動。因為它還是基於文件中的初始位置定位，所以相對定位並沒有脫離文件流。

絕對定位與相對定位相反，位置與文件流無關，因此並不佔據文件流元素的空間，對於文件流元素來說，就相當於絕對定位元素不存在似的。絕對定位的元素由距它最近的已定位祖先元素所確定。如果沒有已定位的祖先元素，就根據初始包含塊來定位。可能是html元素或者是畫布。

因為絕對定位的元素與文件流無關，它們能夠覆蓋頁面中的其他元素。我們也可以使用z-index來控制其堆疊次序。z-index值越大，元素的樓層就越高。

fixed其實就是絕對定位的一種，只是其定位元素是視窗而已。

基本上定位和浮動就是這麼些內容了。實際上布局的時候可能會非常麻煩，因為如果沒有深入理解定位、浮動和清除浮動的原理的話，我們就會非常疑惑說：為什麼清除了浮動之後內邊距增加了，為什麼絕對定位之後塊級框會在這。當然，有乙個能有效避免這些疑惑的方法就是用通用選擇器（*）將所有元素的margin和padding都設定為零，但是可能還是會碰上一些問題。這是學習的過程中不可避免的。所以還是好好學習多多實踐，才能夠勝任前端這份日新月異的工作。

css中的浮動和定位

CSS中的浮動和定位

CSS 定位和浮動

CSS 定位和浮動

css中的浮動和定位

CSS中的浮動和定位

CSS 定位和浮動

CSS 定位和浮動

相關推薦