視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
常規流浮動
定位文字環繞
橫向排列
修改float屬性值為：
預設值為none：不浮動，為常規流
當乙個元素浮動後，元素必定為塊盒(更改display屬性為block)
浮動元素的包含塊，和常規流一樣，為父元素的內容盒
寬度為auto時，適應內容寬度
高度為auto時，與常規流一致，適應內容的高度
margin為auto，為0.
邊框、內邊距、百分比設定與常規流一樣
左浮動的盒子靠上靠左排列
右浮動的盒子考上靠右排列
浮動盒子在包含塊中排列時，會避開常規流塊盒
常規流塊盒在排列時，無視浮動盒子
文字環繞：
行盒在排列時，會避開浮動盒子
外邊距合併不會發生
如果文字沒有在行盒中，瀏覽器會自動生成乙個行盒包裹文字，該行盒叫做匿名行盒。高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子
清除浮動，涉及css屬性：clear
解決高度坍塌
.clearfix::after
前端基礎筆記 CSS 04 浮動
清除浮動 1.普通流 標準流 2.浮動 讓盒子從普通流中浮起來，主要作用是讓多個塊級盒子在一行內顯示。3.定位 將某個盒子定位在瀏覽器的某一固定位置。float的語法 選擇器 例1 兩個普通流塊級元素各佔一行從上到下順序排列 當給乙個元素設定浮動之後，它就會 飄起來 例2 將三個塊級元素設定disp...
前端學習 Css 浮動
塊元素在文件流中預設垂直排列，所以這個三個div自上至下依次排開，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文件流。使用float來使元素浮動，從而脫離文件流 可選值 none，預設值，元素預設在文件流中排列。left，元素會立即脫離文件流，向頁面的左側浮動。right，元素會立即脫離文件流，...
CSS基礎 浮動
一 浮動定位的定義 浮動打破了塊級元素獨佔一行的慣例，使多個塊級元素可以在一行顯示。二 浮動定位的特點 1 浮動元素脫離了普通的文件流，在不在佔據頁面空間時，其他沒有浮動的元素會自動上前佔據浮動元素原來的頁面空間。2 浮動元素會停留在父級元素的左邊或右邊，或者停留在其他浮動元素的邊緣。3 浮動元素只...