對於 CSS 中塊元素 以及塊元素的漂浮的詳細分析

    對於css中的塊元素 相信瞭解過css的人都不陌生，不少時候咱們每每是按照本身的思路寫出了本身的關於css塊的代碼，去運行看看結果的時候下了一跳 ，效果和本身的目的也太大了吧，在這裏我簡單對塊所佔空間總結一下：

一、 對於css中未定位和漂浮的塊，它所佔的空間由它的高度和其父級塊控制，它會隨着文檔流往下排 ，前面有元素它就另起一行，後面有元素讓它本身另起一行，它是不屑於於其餘元素在同一排。固然有種例外，那就是把外邊距margin設置爲負數就能夠達到塊相互交叉。

二、在塊級元素疊加時，被覆蓋的塊元素會盡可能在沒被覆蓋的空間上顯示本身的內容，至關於塊內容的自我表現，只要有空間就抓住機會。出發它的舞臺被徹底覆蓋。

三、若是排在塊元素前面的另外一個塊設置了漂浮，那麼當前塊將會自動去填充前面那個塊元素的位置，知道遇到其前面未設置漂浮和定位的元素爲止，固然了若是這個塊和其前面的塊元素若是重疊了，此塊的位置則位於漂浮塊的下面 屬於被覆蓋元素。

四、對於塊來講外邊距margin、內邊距padding、邊框border，全部加起來纔算塊元素佔距的空間，對於外邊框margin 若兩塊相鄰的塊則以margin大的爲主；全部在不設置margin爲負值的境況下，只要懂得了塊的最基本的屬性，能夠說塊的佈局就是那麼簡單，由於將margin 變爲負值的話每每會出現意料的結果，我知道不少人喜歡講margin 設置爲負值，想達到重疊的效果，其實咱們能夠經過定位或者塊中設置塊的方法來實現塊的疊加效果。

五、要記住在正常的文檔流中若是後面的塊級元素被定爲和前面某個元素有交集，通常是後面的塊在上前端的塊在下，固然這只是針對在同一層而言，還有就是這兩個塊都沒有設置漂浮。

六、對於漂浮的塊就容許 其餘元素和他在同一行，在同一級別元素中它會按照漂浮方向自動跑到內嵌元素的相應方向，列入一下代碼：<label>a</label><div id="left">往前飛</div> ;按正常的文檔流，這個塊會在a下邊另起一行。可是若是設置了左漂浮這個塊將會跑到這個a前面，若是空間大a可能和這個div在一行，如果這個div寬度和其父級塊同樣大，那麼a就會被擠到下一行。

七、不要一行同時飄不少不一樣的塊會出，這個要是出問題會很頭大，咱們能夠將按類將這些塊分開放到幾個父級塊中先排好父級塊 在在父級快中排行分類的塊，就方便控制了。