欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS清除浮動(dòng)的方法詳解

segmentfault   發(fā)布時(shí)間：2016-05-30 11:13:38   作者：秦至   我要評(píng)論
這篇文章主要介紹了CSS清除浮動(dòng)的方法詳解,值得注意的是并不是每次單純把浮動(dòng)清除掉就可以解決相關(guān)問(wèn)題,文中最后談到的閉合浮動(dòng)的方案也非常值得一試,需要的朋友可以參考下

清除浮動(dòng)方法
方法一：使用帶clear屬性的空元素

在浮動(dòng)元素后使用一個(gè)空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)。亦可使用<br class="clear" />或<hr class="clear" />來(lái)進(jìn)行清理。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .news {   
  2.   background-color: gray;   
  3.   border: solid 1px black;   
  4.   }   
  5.   
  6. .news img {   
  7.   float: left;   
  8.   }   
  9.   
  10. .news p {   
  11.   float: rightright;   
  12.   }   
  13.   
  14. .clear {   
  15.   clear: both;   
  16.   }  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="news">  
  2. <img src="news-pic.jpg" />  
  3. <p>some text</p>  
  4. <div class="clear"></div>  
  5. </div>  

優(yōu)點(diǎn)：簡(jiǎn)單，代碼少，瀏覽器兼容性好。
缺點(diǎn)：需要添加大量無(wú)語(yǔ)義的html元素，代碼不夠優(yōu)雅，后期不容易維護(hù)。

方法二：使用CSS的overflow屬性

給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng)，另外在 IE6 中還需要觸發(fā) hasLayout ，例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1。在添加overflow屬性后，浮動(dòng)元素又回到了容器層，把容器高度撐起，達(dá)到了清理浮動(dòng)的效果。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .news {   
  2.   background-color: gray;   
  3.   border: solid 1px black;   
  4.   overflow: hidden;   
  5.   *zoom: 1;   
  6.   }   
  7.   
  8. .news img {   
  9.   float: left;   
  10.   }   
  11.   
  12. .news p {   
  13.   float: rightright;   
  14.   }  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="news">  
  2. <img src="news-pic.jpg" />  
  3. <p>some text</p>  
  4. </div>  

方法三：給浮動(dòng)的元素的容器添加浮動(dòng)

給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)，但是這樣會(huì)使其整體浮動(dòng)，影響布局，不推薦使用。

方法四：使用鄰接元素處理

什么都不做，給浮動(dòng)元素后面的元素添加clear屬性。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .news {   
  2.   background-color: gray;   
  3.   border: solid 1px black;   
  4.   }   
  5.   
  6. .news img {   
  7.   float: left;   
  8.   }   
  9.   
  10. .news p {   
  11.   float: rightright;   
  12.   }   
  13.   
  14. .content{   
  15.   clear:both;   
  16.   }  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="news">  
  2. <img src="news-pic.jpg" />  
  3. <p>some text</p>  
  4. <div class="content">***</div>  
  5. </div>  

注意這里的div.content有內(nèi)容。

方法五：使用CSS的:after偽元素

結(jié)合 :after 偽元素（注意這不是偽類，而是偽元素，代表一個(gè)元素之后最近的元素）和 IEhack ，可以完美兼容當(dāng)前主流的各大瀏覽器，這里的 IEhack 指的是觸發(fā) hasLayout。
給浮動(dòng)元素的容器添加一個(gè)clearfix的class，然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見(jiàn)的塊元素（Block element）清理浮動(dòng)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .news {   
  2.   background-color: gray;   
  3.   border: solid 1px black;   
  4.   }   
  5.   
  6. .news img {   
  7.   float: left;   
  8.   }   
  9.   
  10. .news p {   
  11.   float: rightright;   
  12.   }   
  13.   
  14. .clearfix:after{   
  15.   content: "020";    
  16.   display: block;    
  17.   height: 0;    
  18.   clear: both;    
  19.   visibility: hidden;     
  20.   }   
  21.   
  22. .clearfix {   
  23.   /* 觸發(fā) hasLayout */    
  24.   zoom: 1;    
  25.   }  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="news clearfix">  
  2. <img src="news-pic.jpg" />  
  3. <p>some text</p>  
  4. </div>  

通過(guò)CSS偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見(jiàn)的空格"020"或點(diǎn)"."，并且賦予clear屬性來(lái)清除浮動(dòng)。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout。

總結(jié)
通過(guò)上面的例子，我們不難發(fā)現(xiàn)清除浮動(dòng)的方法可以分成兩類：

一是利用 clear 屬性，包括在浮動(dòng)元素末尾添加一個(gè)帶有 clear: both 屬性的空 div 來(lái)閉合元素，其實(shí)利用 :after 偽元素的方法也是在元素末尾添加一個(gè)內(nèi)容為一個(gè)點(diǎn)并帶有 clear: both 屬性的元素實(shí)現(xiàn)的。

二是觸發(fā)浮動(dòng)元素父元素的 BFC (Block Formatting Contexts, 塊級(jí)格式化上下文)，使到該父元素可以包含浮動(dòng)元素，關(guān)于這一點(diǎn)。

在網(wǎng)頁(yè)主要布局時(shí)使用:after偽元素方法并作為主要清理浮動(dòng)方式；在小模塊如ul里使用overflow:hidden;（留意可能產(chǎn)生的隱藏溢出元素問(wèn)題）；如果本身就是浮動(dòng)元素則可自動(dòng)清除內(nèi)部浮動(dòng)，無(wú)需格外處理；正文中使用鄰接元素清理之前的浮動(dòng)。

最后可以使用相對(duì)完美的:after偽元素方法清理浮動(dòng)，文檔結(jié)構(gòu)更加清晰。

后記：清除浮動(dòng) or 閉合浮動(dòng)？
在網(wǎng)頁(yè)布局中我們會(huì)經(jīng)常用到浮動(dòng)，有了它我們可以更容易地實(shí)現(xiàn)我們想要的效果，但浮動(dòng)過(guò)后往往會(huì)留下一些隱患。這時(shí)，我們通常會(huì)做一件事清除浮動(dòng)，但清除浮動(dòng)也會(huì)經(jīng)常留下隱患，如下代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>Document</title>   
  6.     <style type='text/css'>   
  7.         #main{   
  8.             border: 1px solid #000;   
  9.         }   
  10.         #left{   
  11.             float: left;   
  12.             width: 100px;   
  13.             height: 100px;   
  14.             background-color: #f00;   
  15.         }   
  16.         #right{   
  17.             float: left;   
  18.             width: 100px;   
  19.             height: 100px;   
  20.             background-color: #0f0;   
  21.         }   
  22.     </style>   
  23. </head>   
  24. <body>   
  25.     <div id="main">   
  26.         <div id="left"></div>   
  27.         <div id="right"></div>   
  28.     </div>   
  29. </body>   
  30. </html>  

效果圖如下：
2016530112336907.jpg (316×320)

雖然foot中使用clear:both清除浮動(dòng)，但是main的高度無(wú)法自適應(yīng)子元素的高度，導(dǎo)致塌陷（箭頭所指）。

下面介紹閉合浮動(dòng)，顧名思義，就是使浮動(dòng)元素閉合，清除浮動(dòng)帶來(lái)的影響。目前較常用的清除浮動(dòng)的方法為clearfix。具體就是，不用在foot中添加clear:both，插入如下一行css：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #main:after{   
  2.             content: '.';   
  3.             height: 0;   
  4.             visibility: hidden;   
  5.             /*display: block;*/  
  6.             clear:both;   
  7.         }  

相關(guān)文章

  • 清除css浮動(dòng)的三種方法小結(jié)

    這篇文章主要介紹了清除css浮動(dòng)的三種方法小結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-19

  • 詳解css清除浮動(dòng)float的七種常用方法總結(jié)和兼容性處理

    這篇文章主要介紹了詳解css清除浮動(dòng)float的七種常用方法總結(jié)和兼容性處理,非常具有實(shí)用價(jià)值，需要的朋友可以參考下
    2017-09-11

  • 淺談css中浮動(dòng)和清除浮動(dòng)帶來(lái)的影響

    這篇文章主要介紹了淺談css中浮動(dòng)和清除浮動(dòng)帶來(lái)的影響，通過(guò)代碼示例和圖片展示詳細(xì)介紹講解了浮動(dòng)的應(yīng)用和實(shí)現(xiàn)效果,需要的朋友可以參考下
    2017-08-14

  • CSS清除浮動(dòng)方法小結(jié)

    本文主要介紹了CSS解決浮動(dòng)，清除浮動(dòng)的幾種方法：1、設(shè)置父元素高度；2、overflow；3、增加子元素（塊級(jí)），并且設(shè)置其clear屬性值為both來(lái)解決（隔墻法、內(nèi)墻法）；4、使
    2017-03-22

  • 詳解CSS中zoom屬性或overflow:auto屬性清除浮動(dòng)的作用

    這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動(dòng)的作用,文中通過(guò)實(shí)例代碼介紹的很詳細(xì)，相信會(huì)對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋
    2016-11-26

  • 關(guān)于清除浮動(dòng)塌陷的幾種方法總結(jié)

    在大家在使用css的過(guò)程中，多多少少會(huì)遇到清除浮動(dòng)這個(gè)問(wèn)題。所以這篇文章給大家總結(jié)了div+css中關(guān)于清除浮動(dòng)塌陷的4種方法，相信會(huì)對(duì)大家學(xué)習(xí)或者使用div+css能有所幫助，
    2016-10-17

  • 淺談CSS中的clear清除浮動(dòng)

    下面小編就為大家?guī)?lái)一篇淺談CSS中的clear清除浮動(dòng)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06

  • CSS浮動(dòng)所產(chǎn)生的內(nèi)容溢出問(wèn)題及清除浮動(dòng)的方法小結(jié)

    CSS的float浮動(dòng)效果在一些情況下非常不穩(wěn)定,控制不好的時(shí)候一般還是清除浮動(dòng)為妙,這里我們就來(lái)看一下CSS浮動(dòng)所差生的內(nèi)容溢出問(wèn)題及清除浮動(dòng)的方法小結(jié)
    2016-05-30

  • DIV+CSS 清除浮動(dòng)常用方法總結(jié)

    下面小編就為大家?guī)?lái)一篇DIV+CSS 清除浮動(dòng)常用方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-06

  • Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總

    這篇文章主要介紹了Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-07-11

最新評(píng)論