CSS重點-浮動 隨學筆記
阿新 • • 發佈：2021-10-28
CSS重點-浮動（float）
傳統網頁佈局的三種方式： 網頁佈局的本質：用CSS來擺放盒子，把盒子擺放到相應位置。 CSS提供了三種傳統佈局方式（簡單說，就是盒子如何進行排列順序） 1. 普通流（標準流/文件流）2.浮動（float） 3.定位。 這三種佈局方式都是用來擺放盒子的，盒子擺放到合適位置，佈局自然就完成了。 實際開發中，一個頁面基本都包含了這三種佈局方式(移動端還有新的佈局方式) 。 1.標準流： 所謂的標準流，就是標籤按照規定好的預設方式排列。 （1）塊級元素會獨佔一行，從上向下順序排列； （2）行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。 以上都是標準流佈局，標準流是最基本的佈局方式。 2.浮動： 為什麼需要浮動？ 有很多的佈局效果，標準流無法完成，此時就可以利用浮動完成佈局，因為浮動可以改變元素標籤預設的排列方式。 浮動最典型的應用：可以讓多個塊級元素在同一行排列顯示。 網頁佈局第一準則：多個塊級元素縱向排列標準流，多個塊級元素橫向排列找浮動。 網頁佈局第二準則：先設定盒子大小，之後設定盒子的位置。 浮動：float屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或者另一個浮動框的邊緣。 語法： 選擇器{ float：屬性值；} 引數：none 元素不浮動（預設） left 元素向左浮動 right 元素向右浮動 （1）設定浮動樣式<style> .left, .right { float: left; width: 200px; height: 200px; background-color: pink; } .right { float: right; } </style> </head> <body> <div class="left">左浮動</div><div class="right">右浮動</div> </body>
（2）浮動特性
加了浮動之後的元素，會具有很多特性，需要我們掌握的。 特性： 1.浮動元素會脫離標準流（脫標） 2.浮動的元素會一行內顯示並且元素頂部對齊。 3.浮動的元素會具有行內塊元素的特性。 其中： [1]脫標：設定了浮動（float）的元素最重要的特性： 1.脫離標準普通流的控制（浮）移動到指定位置（動），俗稱脫標。 2.浮動的盒子不再保留原先的位置。 [2.如果多個盒子都設定了浮動，則他們會按照屬性值一行內顯示並且頂端對齊排列。 注意：浮動的元素是相互貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。<style> /* 浮動特性-一行內顯示 */ div { width: 200px; height: 200px; background-color: pink; float: left; } .two { background-color: purple; height: 300px; } .three { background-color: salmon; } </style> </head> <body> <div>1</div> <div class="two">2</div> <div class="three">3</div> <div>4</div>
</body>[3]浮動的元素會具有行內塊元素的特性 任何元素都可以浮動，不願原先是什麼模式的元素，新增浮動之後具有行內款元素相似的特性。 如果行內元素有了浮動，則不需要轉換塊級、行內塊元素就可以直接設定高度和寬度 注意：如果塊級盒子沒有設定寬度，預設寬度和父級一樣寬，但是新增浮動後，他的大小根據內容來決定； 浮動的盒子中間是沒有縫隙的，是緊挨著一起的； 行內元素同理。
<style> span, div { float: left; width: 200px; height: 100px; background-color: salmon; } p { float: right; height: 200px; background-color: sandybrown; } </style> </head> <body> <span>1</span> <span>2</span> <div></div> <p>p</p> </body>
(3)浮動與標準流父級搭配使用
浮動元素經常和標準流父級搭配使用， 為了約束浮動元素位置，我們網頁佈局一般採取的策略是： 先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置，符合網頁佈局第一準則。 浮動佈局注意點： 1.浮動和標準流父級搭配 先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置。 2.如果一個元素浮動了，理論上其餘的兄弟元素也要浮動 一個盒子裡面有多個盒子，如果其中一個盒子府東路，那麼其他兄弟也要應該浮動，以防止引起問題。 浮動的盒子只會影響盒子後面的標準流，不會影響前面的標準流。<style> .box { width: 1200px; height: 460px; background-color: coral; margin: 0 auto; } .left { width: 230px; height: 460px; background-color: pink; float: left; } .right { width: 970px; height: 460px; background-color: red; float: left; } </style> </head> <body> <div class="box"> <div class="left">左側</div> <div class="right">右側</div> </div> </body>
（4）清除浮動
為什麼要清除浮動？ *由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不佔有位置，最後父級盒子高度為0時，就會形象下面的標準流盒子。 清除浮動本質： 清楚浮動的本質就是清除浮動元素造成的影響。 注意：如果父盒子本身有高度，則不需要清除浮動； 清除浮動之後，父級就會根據浮動的子盒子自動監測高度，父級有了高度，就不會影響下面的標準流了。 語法： 選擇器 { clear: 屬性值； } 引數： left 不允許左側有浮動元素（清除左側浮動的影響） right 不允許右側有浮動元素（清楚右側浮動的影響） both 同時清除左右兩側的影響。 實際工作中，我們幾乎都用clear: both; 清除浮動的策略是：閉合浮動。 清除浮動的方法： 1.額外標籤法也稱為隔牆法，是W3C推薦的做法。 2.父級新增overflow屬性。 3.父級新增after偽元素。 4.父級新增雙偽元素。 【1】額外標籤法： 額外標籤法也稱為隔牆法，是W3C推薦的做法。 額外標籤法會在浮動元素末尾新增一個空的標籤。例如<div style="clear:both"></div>,或者其他標籤（如<br/>等。<style> .box { width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer{ height: 200px; background-color: blueviolet; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="damao">大毛</div> <div class="ermao">二毛</div> <!-- 這個新增的盒子要求必須是塊級元素不能是行內元素不能是行內元素 --> <div class="clear"></div> </div> <div class="footer">footer</div> </body>注意： 優點：通俗易懂，書寫方便。 缺點：新增許多無意義的空標籤必須是塊級元素。 實際工作中可能會遇到，但是不常用。 【2】父元素新增overflow屬性： 可以給父級新增overflow屬性，將其屬性只設置為hidden、auto或scroll。
<style> .box { /* 清除浮動 */ overflow: hidden; width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer{ height: 200px; background-color: blueviolet; } </style> </head> <body> <body> <div class="box"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer">footer</div> </body>注意： 優點：程式碼簡潔。 缺點：無法顯示溢位部分。 【3】:after偽元素法： :after 方式是額外標籤法的升級版。 語法： .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /*IE6、7專有*/ *zoom: 1; }
<style> .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } .box { width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer { height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer">footer</div> </body>注意：優點：沒有增加的標籤，結構更簡單 缺點：照顧低版本瀏覽器 代表網站：百度、淘寶網、網易等。 【4】雙偽元素法： 使用before和after雙偽元素清除浮動。 語法： .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
<style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .box { width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer { height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer">footer</div> </body>注意：優點：程式碼更簡潔 缺點：照顧低版本瀏覽器 代表網站：小米、騰訊等