頁面布局方式主要包含：文件流（常規流）、浮動流（脫離文件流）。
文件流：
文件流中元素框的位置由元素在html中的位置決定，塊級元素從上到下依次排列，框之間垂直距離由框的垂直margin計算得到，行內元素在一行中水平布置。
文件流就是html文件中的元素如塊級元素、行內元素依據他們的顯示屬性按照在文件中的先後順序依次顯示。塊級元素就佔一行或多行，行內元素就和其它元素共處一行。
浮動流：元素從正常的排列順序被抽離
浮動可以使元素向左或向右移動，直到它的邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在正常文件流中，所以標準文件流中的塊框表現得就像浮動框不存在一樣。
浮動屬性：float:left(向左浮動)/right(向右浮動)/none(預設值)
對div2進行左浮動,效果如右圖所示。
div2雖然保持在當前位置，實際上已經不在文件流中，而在浮動流中，然後文件流就出現空缺，於是文件流下面的div3,div4就頂上去，與div1形成新的文件流。
如果浮動前面的元素沒有浮動屬性，則浮動會另起一行在此元素的下面浮動。
對div2進行右浮動,效果如圖所示。
當第二個div設定為向右浮動，那麼它就不屬於文件流，而是成為了浮動流，剩下的div1,div3,div4重新排列。
浮動元素不在文件流中，所以浮動後面緊跟著的元素佔據了浮動原先位置。
當乙個元素浮動之後，其下方裝載文字的容器雖然會佔據浮動元素原先的位置，但是其中的文字會一直圍繞在浮動元素周圍，而不會被浮動元素覆蓋
對div2和div3設定左浮動,效果如圖所示。
說明：假如某個div元素a是浮動的，如果a元素上乙個元素也是浮動的，那麼a元素會跟隨在上乙個元素後邊(如果一行放不下這兩個元素，那麼a元素會被擠到下一行)
對div2設定左浮動,div3設定右浮動，主要應用於兩列網頁的布局，效果如圖所示。
邊框不能被撐開
margin，padding不能正確顯示，特別是上下邊的margin和padding不能正確顯示。
清除浮動：clear:left/right/both/none
clear屬性規定元素的哪一側不允許其它浮動元素。
其它清除浮動的方法：
測試程式
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
CSS學習筆記 浮動 六
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。浮動框浮動後，將脫離原來的普通文件流，並且不會占用空間，層級會高於普通文件流。浮動元素會生成乙個塊級框，而不論它本身是何種元素。浮動元素一般要指定乙個明確的寬度 否則，它們會盡可能地窄。屬性名稱 取值 描述 float l...
前端學習筆記 CSS 清除浮動
我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現，但是，你不能說浮動不好 由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。準確地說，並不是清除浮動，而是清除浮動後造成的影響 如果浮動一...
前端學習 Css 浮動
塊元素在文件流中預設垂直排列，所以這個三個div自上至下依次排開，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文件流。使用float來使元素浮動，從而脫離文件流 可選值 none，預設值，元素預設在文件流中排列。left，元素會立即脫離文件流，向頁面的左側浮動。right，元素會立即脫離文件流，...