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