css浮動是現在網頁布局中使用最頻繁的效果之一,而浮動可以幫我們解決很多問題,那麼就讓我們一起來看一看如何使用浮動.
自窗體自上而下分成一行一行，並在每行中按從左到右的順序排放元素。
當然我們也可以讓占用文件流的元素轉換成不佔文件流，這就要用到css中屬性position、float、display來控制。預設情況下，所有元素都處在文件流中，四種情況將使得元素離開文件流：浮動float、絕對定位absolute、相對定位fixed、元素不顯示display:none，這種情況不佔文件流的空間，而普通元素的位置基於文件流。（了解）浮動float用於設定標籤的居左浮動和居右浮動，浮動後的元素不屬於html文件流，需要用清除浮動把文件拽回到文件流中。
浮動值：
left：向左浮動
right：向右浮動
特徵：塊元素可以在一行顯示
浮動特徵：
1.按照乙個指定的方向移動，遇到父級的邊界或者其他的元素停下來
2.塊元素可以在一行顯示，寬由內容撐起來
3.行內元素支援設定寬高
4.脫離文件流 float不是完全脫離文件流的
塊元素 ：對於塊元素，後面未浮動的元素所佔的位置是浮動元素的位置
注意：內容會把浮動元素的位置保留，
行內元素：行內元素會接著浮動元素顯示，內容會形成環繞浮動元素的樣子
5.造成父級塌陷(破壞性)
通過例子來解釋浮動
1.頁面上有兩個塊元素，每個塊元素獨佔一行
2.我們希望它能併排顯示，這時就可以使用float，我們先給紅的div加float:left，發現兩個是在一行了，但是它們重疊在了一起。
3.這是因為加了float的元素不但會消除獨佔一行的特性，而且還會「飄」在其它元素之上。
4.我們為藍色的div也加上float，這時正常了，兩個div顯示在一排。
浮動的目的是使元素變為可在一行顯示，且可設定寬和高的元素。它的作用類似於inline-block；只不過它是脫離了文件流了。
浮動的元素脫離文件流後，對塊元素而言，從上向下的文件流中找不到浮動的元素，所以在浮動元素後加塊元素，塊元素會被覆蓋掉。
浮動的元素脫離文件流後，這個浮動的塊元素雖然脫離了文件流，但對它後面的行元素而言，從左至右的位置中，是要以這個浮動元素的位置開始的。
.d1
.d2
這是個不浮動的超級鏈結
描述：清除浮動是在使用了浮動之後必不可少的，為了**布局的效果，清除浮動也變得非常麻煩。
屬性：clear
值：left、right、both
清除浮動的常用方式：
1.結尾處加空div標籤 clear:both （或在下乙個元素上加clear:both;）
2.父級div定義 偽元素:after
3.父級div定義 overflow:hidden
a.剛才的例子已經完成了併排布局，這時我需要加第三個塊元素，起名d3，這時發現，d3是被壓在了前兩個塊之下
b.剛才說過，加了float的元素會飄在其它元素之上，實際上是因為它們已經不屬於html正常的文件流了，後面再有多少個元素和它無關，它始終飄在上面
c.我們只是想讓它不獨佔一行，並沒有想讓它不屬於文件流。所以可以用clear:both把float元素拽回文件流。
用clear:both清除浮動**
clear不只是both乙個屬性，它還有left和right，它們兩個的作用是分別清除float的左浮動和右浮動。
左浮動
未浮動右浮動
clear:both;的正確使用方式：
1.加了clear:both的元素需要為塊元素。這樣clear:both才能清除塊「從上而下」的文件流中被浮動的元素。
2.不要加在外層的div外面，如果這個外層div沒有浮動，那這個clear:both是不起作用的。
.d1
.d2.d3
.clear
這裡加了乙個清除浮動
不起作用
.box //overflow:auto也是可以的
.left,.right
after偽元素新增的內容預設為行內元素，所以需要設定display:block
after偽元素新增的內容預設為行內元素，所以需要設定display:block
.box::after
.left,.right
使用浮動別忘記清除浮動,記住,無論現在浮動是否對你有影響,都要楊成良好的習慣,否則等後續修改**的時候可能會影響整個布局。
更多專業前端知識，請上
【猿2048】www.mk2048.com
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了...