css浮动(float)及清除浮动的几种实用方法
CSS浮動是現(xiàn)在網頁布局中使用最頻繁的效果之一,而浮動可以幫我們解決很多問題,那么就讓我們一起來看一看如何使用浮動.
一.css浮動(float)
(1)html文檔流
自窗體自上而下分成一行一行，并在每行中按從左到右的順序排放元素。
(2)網頁中大部分對象默認是占用文檔流，也有一些對象是不占文檔流的，比如表單中隱藏域。
當然我們也可以讓占用文檔流的元素轉換成不占文檔流，這就要用到CSS中屬性position、float、display來控制。默認情況下，所有元素都處在文檔流中，四種情況將使得元素離開文檔流：浮動float、絕對定位absolute、相對定位fixed、元素不顯示display:none，這種情況不占文檔流的空間，而普通元素的位置基于文檔流。（了解）浮動float用于設置標簽的居左浮動和居右浮動，浮動后的元素不屬于html文檔流，需要用清除浮動把文檔拽回到文檔流中。
浮動值：
???????left：向左浮動
???????right：向右浮動
特征：塊元素可以在一行顯示
?
浮動特征：
????1.按照一個指定的方向移動，遇到父級的邊界或者其他的元素停下來
????2.塊元素可以在一行顯示，寬由內容撐起來
????3.行內元素支持設置寬高
????4.脫離文檔流 ?float不是完全脫離文檔流的
????????塊元素 ：對于塊元素，后面未浮動的元素所占的位置是浮動元素的位置
?注意：內容會把浮動元素的位置保留，
???????行內元素：行內元素會接著浮動元素顯示，內容會形成環(huán)繞浮動元素的樣子
???5.造成父級塌陷(破壞性)
通過例子來解釋浮動
1.頁面上有兩個塊元素，每個塊元素獨占一行
2.我們希望它能并排顯示，這時就可以使用float，我們先給紅的div加float:left，發(fā)現(xiàn)兩個是在一行了，但是它們重疊在了一起。
3.這是因為加了float的元素不但會消除獨占一行的特性，而且還會“飄”在其它元素之上。
4.我們?yōu)樗{色的div也加上float，這時正常了，兩個div顯示在一排。
代碼
<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8" /><title>CSS浮動定位</title><style>.d1{width:200px; height:200px; background:red; float: left; }.d2{width:300px; height:300px; background:blue;float: left;}/*.d3{width:500px; height:500px; background:green; clear:both;}*/</style> </head> <body><div class="d1"></div><div class="d2"></div><!--<div class="d3"></div>--> </body> </html>
浮動的目的是使元素變?yōu)榭稍谝恍酗@示，且可設置寬和高的元素。它的作用類似于inline-block；只不過它是脫離了文檔流了。
浮動的元素脫離文檔流后，對塊元素而言，從上向下的文檔流中找不到浮動的元素，所以在浮動元素后加塊元素，塊元素會被覆蓋掉。
浮動的元素脫離文檔流后，這個浮動的塊元素雖然脫離了文檔流，但對它后面的行元素而言，從左至右的位置中，是要以這個浮動元素的位置開始的。
.d1{ width:100px; height: 100px; background-color:red; float: left} .d2{ width:200px; height: 200px; background-color:blue; float: left}<div class="d1"></div> <div class="d2"></div> <a href="#">這是個不浮動的超級鏈接</a>
二、清除浮動
???描述：清除浮動是在使用了浮動之后必不可少的，為了網站布局的效果，清除浮動也變得非常麻煩。
屬性：clear
值：left、right、both
清除浮動的常用方式：
1.結尾處加空div標簽 clear:both （或在下一個元素上加clear:both;）
2.父級div定義 偽元素:after
3.父級div定義 overflow:hidden
(1).?結尾處加空div標簽 clear的方式清除浮動
a.剛才的例子已經完成了并排布局，這時我需要加第三個塊元素，起名d3，這時發(fā)現(xiàn)，d3是被壓在了前兩個塊之下
b.剛才說過，加了float的元素會飄在其它元素之上，實際上是因為它們已經不屬于html正常的文檔流了，后面再有多少個元素和它無關，它始終飄在上面
c.我們只是想讓它不獨占一行，并沒有想讓它不屬于文檔流。所以可以用clear:both把float元素拽回文檔流。
?
用clear:both清除浮動代碼
<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8" /><title>CSS浮動定位</title><style>.d1{width:200px; height:200px; background:red; float: left; }.d2{width:300px; height:300px; background:blue;float: left;}.d3{width:500px; height:500px; background:green; clear:both;}</style> </head> <body><div class="d1"></div><div class="d2"></div><div class="d3"></div> </body> </html>
clear不只是both一個屬性，它還有l(wèi)eft和right，它們兩個的作用是分別清除float的左浮動和右浮動。
<div class="d1"></div> 左浮動<div class="d4"></div> 未浮動<div class="d2"></div> 右浮動<div class="clear"></div><div class="d3"></div>
clear:both;?的正確使用方式：
1.加了clear:both的元素需要為塊元素。這樣clear:both才能清除塊“從上而下”的文檔流中被浮動的元素。
2.不要加在外層的div外面，如果這個外層div沒有浮動，那這個clear:both是不起作用的。
(2).使用overflow:hidden清除浮動
.box{ overflow: hidden;} //overflow:auto也是可以的 .left,.right{ width:100px; height: 100px; background:#388bff; float: left;}<div class="box"><div class="left"></div><div class="right"></div></div>
(3).使用偽元素清除浮動
after偽元素添加的內容默認為行內元素，所以需要設置display:block
after偽元素添加的內容默認為行內元素，所以需要設置display:block .box::after{ content: " "; clear: both; display: block;} .left,.right{ width:100px; height: 100px; background:#388bff; float: left;} <div class="box"><div class="left"></div><div class="right"></div> </div>使用浮動別忘記清除浮動,記住,無論現(xiàn)在浮動是否對你有影響,都要楊成良好的習慣,否則等后續(xù)修改代碼的時候可能會影響整個布局。
上海尚學堂web前端培訓原創(chuàng)，歡迎點擊閱讀其他相關技術文章或者獲取更多支持資料。
參考原文：http://www.shsxt.com/it/html5/856.html
?
轉載于:https://www.cnblogs.com/shsxt/p/8385028.html
總結
以上是生活随笔為你收集整理的css浮动(float)及清除浮动的几种实用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Lock和synchronized比较详
- 下一篇： emqtt 试用（二）验证 emq 和