css提供了三種傳統的布局方式（盒子如何排列）

普通流（標準流）

定義：就是盒子按規定的默認方式排列

1.塊級元素會獨占一行，比如；div, hr, p, h1-h6, ul, ol;

2.行內元素就會按從左到右的方式排列，比如；span, a, i ,em等

浮動

首先有幾個問題。

1.為什么需要浮動？

很多布局標準流無法完成，浮動可以改變原有默認的位置。典型操作：可以把多個塊級元素放在一行排列顯示。

網頁布局口令：多個塊級元素縱向找標準流，橫向找浮動。

2。什么是浮動？

屬性float用于創建浮動。語法? 選擇器{float;屬性值}

3.浮動的特性

脫標（浮動的盒子不會在原來的位置）

浮動的元素會一行顯示并頂部對齊

任何盒子都會浮動，浮動的元素會有行內塊的特性

盒子浮動就像排隊一樣，浮動后的元素不占用空間。

4.浮動應該注意的地方

如果塊級盒子沒有設置寬度，那么就默認和父級一樣。

浮動的盒子只會影想后面的標準流不會影響前面的。

4.浮動元素元素經常和標準流父級使用

父級一般不會設置高度，因為總盒子的高度不確定。

?清除浮動

1.為什么要清除浮動？

父盒子沒有給高度，但是子盒子浮動又沒有占位置，父盒子的高度為0，就會影響下面的盒子。

2.消除浮動的方法。

1.

選擇器{clear:屬性值}

額外標簽法

額外標簽法 會在浮動元素末尾添加一個空的標簽。例如 <div style=”clear:both”></div>，或者其他標簽，這個新的標簽一定是塊級元素。 （如<br />等） ? 優點： 通俗易懂，書寫方便 ? 缺點： 添加許多無意義的標簽，結構化較差 父級添加 overflow 可以給父級添加 overflow 屬性，將其屬性值設置為 hidden、 auto 或 scroll 。 子不教,父之過,注意是給父元素添加代碼 ? 優點：代碼簡潔 ? 缺點：無法顯示溢出的部分 :after 偽元素法 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1; } ? 優點：沒有增加標簽，結構更簡單 ? 缺點：照顧低版本瀏覽器 ? 代表網站： 百度、淘寶網、網易等 雙偽元素清除浮動 .clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both; }.clearfix {*zoom:1; } ? 優點：代碼更簡潔 ? 缺點：照顧低版本瀏覽器 ? 代表網站：小米、騰訊等

?

3. 清除浮動本質

? 清除浮動的本質是清除浮動元素造成的 影響 ? 如果父盒子本身有高度，則不需要清除浮動 ? 清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了 前端日記： 剛開始學前端，現在大一，用這個方法記住所學的知識點，是 看pink老師的視頻總結的筆記。希望自己每天都能發一篇筆記博客。記錄成長。一起去未來！我有懷疑過自己是不是真的不適合，但既來之，則安之。 我走的每一步路都算數。

總結

以上是生活随笔為你收集整理的前端css之 浮动 自学日记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。