（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字環(huán)繞效果：
html代碼如下：
1 <body>2 3 <style type="text/css">4 #big img {float: left;padding: 10px;border: 1px solid red;}5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;}6 </style>7 <div id="big">8 <span>廣告浮動(dòng)效果:</span>9 <p><img src="..\Desktop\p6.jpg" width="200" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p> 10 </div> 11 12 </body>解釋：把img標(biāo)簽 直接左浮動(dòng)，就會(huì)出現(xiàn)文字包圍圖片的效果，而padding: 10px;的作用是設(shè)置圖片與文字的距離，運(yùn)行效果如下（記得自己修改圖片路徑）：
?
?
二.多個(gè)div并排顯示
html代碼如下：
?
?
1 <body>2 3 <style type="text/css">4 #big div {width: 100px;height: 100px;}5 .div1 {background: red;}6 .div2 {background: yellow;}7 .div3 {background: green;}8 </style>9 <div id="big"> 10 <div class="div1">div1</div> 11 <div class="div2">div2</div> 12 <div class="div3">div3</div> 13 </div> 14 15 </body>上面的代碼顯示效果如下：
由圖看出三個(gè)div并沒有并排顯示，而是豎著顯示的，這就是默認(rèn)的顯示方法。而如果想要并排顯示的話，只需要在上上面的代碼中加一句話， ?
#big div {width: 100px;height: 100px;float：left;}然后顯示效果如下：
?
三.清除浮動(dòng)
有下面的這段html代碼：
1 <body>2 3 <style type="text/css">4 #big div {width: 100px;height: 100px;}5 .div1 {background: red;float: left;}//注意這里的第一個(gè)div是左浮動(dòng)；6 .div2 {background: yellow;}7 .div3 {background: green;}8 </style>9 <div id="big"> 10 <div class="div1">div1</div> 11 <div class="div2">div2</div> 12 <div class="div3">div3</div> 13 </div> 14 15 </body>從第二個(gè)例子可以得知，如果div2和div3都設(shè)置了float：left；三個(gè)div就會(huì)并排顯示。注意上面的代碼，第一個(gè)div是左浮動(dòng)，而后面兩個(gè)卻沒有設(shè)置浮動(dòng)，運(yùn)行效果怎么樣呢？如下圖：
由圖可以看出，div2不見了，這是為什么呢？因?yàn)閐iv1設(shè)置為左浮動(dòng)，所以div2會(huì)默認(rèn)為從第一個(gè)顯示，所以div1就覆蓋了div2，div3從div2處繼續(xù)顯示，所以造成了這樣一個(gè)結(jié)果，那么該怎么去還原默認(rèn)顯示呢？這就要用到清除浮動(dòng)，修改代碼 ?.div2 {background: yellow;clear：left;}就ok了。效果如下：
div2又出現(xiàn)了，這就是清除浮動(dòng)的作用，clear屬性有三種值：left、right、both；顧名思義，就知道什么意思了，我不多說了。
三個(gè)例子就到這兒吧，希望對(duì)大家有幫助。有問題歡迎討論。
轉(zhuǎn)載于:https://www.cnblogs.com/luckk/p/3835840.html
總結(jié)
以上是生活随笔為你收集整理的（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 银行卡分为几种类型
- 下一篇： 农村可以投资的行业 都是值得了解的好选项