围住浮动元素（消除浮动）的三种方法
浮動多用于多欄布局中，浮動元素脫離了文檔流，其父元素看不到它，因而也就不會圍住它。為了控制浮動效果，有時候需要清除浮動。
1、對元素浮動?????????????????????????????????????????????????????????????
考慮一種情形，假如我們需要將文字放在圖片的右側，該怎么做呢？最為常用的方式是對圖片進行浮動。為了演示，我們先建立一個網頁，頁面代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>擁有父元素的消除浮動</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 section { 8 border: 1px solid blue; 9 margin: 0 0 10px 0; 10 } 11 img {float: left;} 12 p {margin: 0;} 13 footer {border: 1px solid red;} 14 </style> 15 </head> 16 <body> 17 <section> 18 <img src="../img/yellow_flower.jpg" alt="flower"/> 19 <p>something else</p> 20 </section> 21 <footer>Here is the footer element</footer> 22 </body> 23 </html>頁面效果如下：
看到了圖片在標題“something else”的左邊，但是由于img元素脫離了文檔流，footer元素的內容會往上擠。我們想要的效果應該是footer元素的內容“另起一行來顯示”。我們用以下方法來實現我們所需要的效果
2、消除元素浮動????????????????????????????????????????????????????????????
方法一：為父元素應用overflow??????????????????????????????????????
?為section元素添加樣式值：overflow：hidden。最后的樣式值變為：
1 section { 2 border: 1px solid blue; 3 margin: 0 0 10px 0; 4 } 5 img {float: left;} 6 p {margin: 0;} 7 footer {border: 1px solid red;}頁面效果如圖2-1所示：
這種效果就是我們所需要的了。實際上，overflow:hidden 聲明的真正用途是為了防止包含元素被超大內容撐大，超大的內容會被容器剪切掉。除此之外，overflow:hidden 還有另外一個作用，即它能可靠的迫使父元素包含其浮動的子元素。
方法二：同時浮動父元素?????????????????????????????????????
?最終的代碼為：
1 section { 2 border: 1px solid blue; 3 margin: 0 0 10px 0; 4 float: left; 5 width: 100%; 6 } 7 img {float: left;} 8 p {margin: 0;} 9 footer {border: 1px solid red; clear: left;}父元素section也浮動之后，不管其子元素是否浮動，它都會緊緊地包圍其子元素，因此我們用width:100%讓section與瀏覽器同寬。當section浮動之后，footer元素的內容會盡量往上靠，努力擠到section旁邊去。為了強制footer元素依舊呆在section元素的下面，我們需要給footer元素消除浮動，添加clear：left。被消除浮動的元素不會被提到浮動元素的旁邊。得到的效果如圖2-1所示。
方法三：添加非浮動的清除元素?????????????????????????????????????
我們可以在浮動元素的后面添加一個元素，讓這個元素清除浮動。父級元素一定會包含清除了浮動的元素。這樣的方式有兩種：
第一種是直接添加一個表現型的元素，頁面代碼變為：
1 <section> 2 <img src="../img/yellow_flower.jpg" alt="flower"/> 3 <p>something else</p> 4 <div class="clear"></div> 5 </section> 6 <footer>Here is the footer element</footer>css代碼最終變為：
1 section { 2 border: 1px solid blue; 3 margin: 0 0 10px 0; 4 } 5 img {float: left;} 6 p {margin: 0;} 7 footer {border: 1px solid red;} 8 .clear {clear: left;}?
第二種方式給父級section元素添加一個類clearfix，該類的代碼如下：
.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;clear: both; }頁面代碼最終為
1 <section class="clearfix"> 2 <img src="../img/yellow_flower.jpg" alt="flower"/> 3 <p>something else</p> 5 </section> 6 <footer>Here is the footer element</footer>如果在網頁中浮動元素并沒有父級元素時，我們也可以采取這種方式來達到我們想要的效果。
這兩種方式所實現的效果都如圖2-1所示。
?
資料參考：
?《css設計指南（第3版）》
?
?
轉載于:https://www.cnblogs.com/yjfengwen/archive/2013/05/24/3097323.html
總結
以上是生活随笔為你收集整理的围住浮动元素（消除浮动）的三种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设置NTFS文件访问权限
- 下一篇： MySQL 5.1 安装过程中报appl