當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

围住浮动元素（消除浮动）的三种方法

發布時間：2024/1/17 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了围住浮动元素（消除浮动）的三种方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

浮動多用于多欄布局中，浮動元素脫離了文檔流，其父元素看不到它，因而也就不會圍住它。為了控制浮動效果，有時候需要清除浮動。

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

總結

以上是生活随笔為你收集整理的围住浮动元素（消除浮动）的三种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。