Web前端入门学习（5）——浮动原理及清除浮动
浮動(dòng)原理及清除浮動(dòng)
上節(jié)回顧
? 在上節(jié)的《Web前端入門(mén)學(xué)習(xí)（4）—— 塊級(jí)元素和行內(nèi)元素之特征與轉(zhuǎn)換》中(http://cherry360.blog.51cto.com/12176744/1863945)，介紹了塊級(jí)元素和行內(nèi)元素的特征，及粗略介紹了如何進(jìn)行轉(zhuǎn)換。加上display屬性，可以指定元素的類(lèi)型，如display:block、display:inline，以及display:inline-block。當(dāng)然用得最多的是最后一個(gè)display:inline-block。結(jié)合例子來(lái)看：
例1：
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <style>div,span{height:100px;width:100px;background:blue;border:1px?solid?red;} </style> </head> <body><div>div1</div><div>div2</div><span>span1</span><span>span2</span> </body> </html>顯示結(jié)果：
例2，如果在css樣式中加上display:inline-block,即把CSS樣式改成：
div,span{height:100px;width:100px;background:blue;border:1px?solid?red;display:inline-block; }顯示效果將會(huì)變成：
從上面的對(duì)比結(jié)果可以看出，屬性display:inline-block的效果是，可以把塊級(jí)元素在同一行內(nèi)顯示，而行內(nèi)元素也變得支持寬高。但是使用這種方式，也有一些隱患問(wèn)題，就是換行被解析。也就是說(shuō)，標(biāo)簽之間換行之后，顯示出來(lái)的效果中間是存在間隙的，并且不同瀏覽器之間的間隙大小不一致。此外，IE6、IE7是不支持塊級(jí)元素的inline-block效果。那么有其他辦法可以解決嗎？這就是本節(jié)需要討論的問(wèn)題了。
浮動(dòng)原理
? 任何元素都可以被浮動(dòng)，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框位置；由于浮動(dòng)框不在文檔流中，所以文檔流中的元素會(huì)表現(xiàn)得就像浮動(dòng)框不存在一樣。文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。話(huà)不多說(shuō)，看例子最直觀：
例3：
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <style>div,span{height:100px;width:100px;background:blue;border:1px?solid?red;float:left;} </style> </head> <body><div?class="div1">div1</div><div?class="div2">div2</div><span?class="span1">span1</span><span?class="span2">span2</span> </body> </html>顯示結(jié)果：
本例的結(jié)果和例2的結(jié)果，代碼區(qū)別在于把display:inline-block改成float:left，而顯示結(jié)果的區(qū)別是標(biāo)簽換行沒(méi)有被解析。還有一些特點(diǎn)現(xiàn)在通過(guò)肉眼還無(wú)法看出來(lái)，就是使用float屬性的元素會(huì)脫離文檔流，現(xiàn)在看看下面例子：
例4：
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <style>.box1{width:100px;height:100px;background:red;float:left;}.box2{width:200px;height:200px;background:blue;} </style> </head> <body><div?class="box1"></div><div?class="box2"></div> </body> </html>顯示結(jié)果：
從例4可以看出，紅色塊盒子使用了left浮動(dòng)，而藍(lán)色塊盒子沒(méi)有使用浮動(dòng)元素，因此紅色塊脫離了文檔流，而藍(lán)色塊盒子好像看不到紅色塊盒子一樣，重疊在一起了。
綜上所得，總結(jié)出浮動(dòng)元素的幾個(gè)特征：
內(nèi)聯(lián)元素支持寬高；
塊元素可以在同行顯示；
寬度由內(nèi)容撐開(kāi)；
脫離文檔流；
提升層級(jí)半層。
? 了解了浮動(dòng)原理之后，我們知道使用float屬性的元素會(huì)脫離文檔流，那么其他沒(méi)有使用浮動(dòng)屬性的元素會(huì)看不到它們，從而導(dǎo)致出現(xiàn)重疊這種狀況，如何解決呢？那么現(xiàn)在就引入一個(gè)清除浮動(dòng)的知識(shí)點(diǎn)了。
? 例5：
在例4的代碼中，把box2的樣式改成：
.box2{?width:200px;height:200px;background:blue;clear:left;}顯示結(jié)果：
屬性clear把紅色塊盒子的左浮動(dòng)清除了，所以藍(lán)色塊盒子不再和紅色盒子重疊在一起。這里僅是簡(jiǎn)單介紹清除浮動(dòng)的辦法之一，當(dāng)然還有很多辦法，在此僅作入門(mén)了解。
??
?溫馨提示：
? ? ? ? ? float浮動(dòng)屬性值：left/right/none；
? ? ? ? ? clear清除浮動(dòng)屬性值：left/right/both/none。
轉(zhuǎn)載于:https://blog.51cto.com/cherry360/1864258
總結(jié)
以上是生活随笔為你收集整理的Web前端入门学习（5）——浮动原理及清除浮动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【极品手机推荐】安卓3G运存16G内存，
- 下一篇： js判断是否是ie浏览器