預設文件流就是對頁面布局不加任何修飾，元素自動的布局方式，其特點有
1)元素在頁面中的顯示順序與元素在****現的順序是一致的。
2)塊級元素獨佔一行空間，寬度預設為父級的100%，高度由其內容高度所決定。3)行內元素與其他元素共享一行空間，寬高由其內容所決定。
但是預設文件流往往不能滿足我們的布局需求，我們可以使用如下屬性改變預設布局：
1.display 通過為display屬性指定值block,inline,inline-block等可以改變元素在正常流中的行為
2.float 通過為float屬性指定值left、right使得塊級元素在一行中排列
3.position預設情況下使用的是正常布局，通過指定值來改變其布局方式（例如fixed,relative）
none
此元素不會被顯示。
block
此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline
預設。此元素會被顯示為內聯元素（行內元素），元素前後沒有換行符。
inline-block
行內塊元素。（css2.1 新增的值）既可以在一行內，又可以設定自己的寬度高度邊框樣式
display並不改變文件流，還是自上而下
浮動布局的主要用法是為了讓塊級元素在一行中顯示（列級布局），或者讓文字在的周圍顯示。float常與margin一起使用，如果修飾行內元素加上display：block；
left
元素向左浮動。
right
元素向右浮動。
none
預設值。元素不浮動，並會顯示在其在文字**現的位置。
inherit
規定應該從父元素繼承 float 屬性的值。
會改變文件流，會浮動在元素上方，脫離文件流，會對後面的內容造成影響。例如出現疊加效果
對於浮動造成的影響可以對父元素設定overflow：hidden；可以將父元素撐起。也可以使用clean：both；可以將浮動清除。或者在子元素外部新增乙個父元素，div class=「clean」，對clean進行浮動清除，設定height=0；clean=both；最好的方法是使用偽元素，::after 清除浮動
img{
float:left;
margin-right:30px;
一列三個卡片，將元素進行浮動設定float：left；對單個的元素進行設定。
對列表進行設定時，對ul的樣式進行清除list-style：none；對li的浮動設定成塊級行內元素，既可以在一行排列，也可以像塊級元素一樣對他的寬高進行設定。
也可以對li設定浮動，float：left；同樣可以實現將li一行排列，但是對後面的元素造成了影響。可以使用偽類進行浮動的清除
當li內部元素增加時，想要設定一行所要放置的元素個數，第一種方法可以對元素設定定寬，想要一行放置幾個計算好寬度就可以。
如果想要在頁面的左右兩端顯示，可以對元素的奇偶進行設定，奇數個元素向左浮動，偶數個元素向右浮動。
想要兩個元素在一行也可以對乙個元素進行浮動設定，另乙個元素會自動浮動上來。
css浮動布局
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
css浮動布局
清除浮動 形狀浮動 使用浮動可以控制相鄰元素間的排列關係。float left 向左浮動 float right 向右浮動 float none 不浮動 沒有設定浮動的塊元素是獨佔一行的。浮動是對後面元素的影響，第二個元素設定浮動對第乙個元素沒有影響。表示第乙個元素div.first of type...
css 浮動布局
歡迎來到位元魔典 關於浮動的基礎知識，這裡先引用w3school的一段介紹，在此基礎上我會新增一些註記和補充 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。請看下圖，當把框 1 向右浮動...