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