CSS怎樣清除浮動(dòng)-創(chuàng)新互聯(lián)

小編給大家分享一下CSS怎樣清除浮動(dòng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元通化做網(wǎng)站,已為上家服務(wù),為通化各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

在CSS布局中float屬性經(jīng)常會(huì)被用到，但使用float屬性后會(huì)使其在普通流中脫離父容器，讓人很苦惱

1 浮動(dòng)帶來(lái)布局的便利，卻也帶來(lái)了新問(wèn)題

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Clear float</title>
    <style type="text/css">
        .container{
            margin: 30px auto;
            width:600px;
            height: 300px;
        }
        .p{
            border:solid 3px #a33;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: #060;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

我們希望看到的效果是這樣的

CSS怎樣清除浮動(dòng)

但結(jié)果卻是這樣的

CSS怎樣清除浮動(dòng)

父容器并沒(méi)有把浮動(dòng)的子元素包圍起來(lái)，俗稱塌陷，為了消除這種現(xiàn)象，我們需要一些清除浮動(dòng)的技巧。

2 如何清理浮動(dòng)

清理浮動(dòng)一般有兩種思路

  • 利用 clear屬性，清除浮動(dòng)

  • 使父容器形成BFC

分別看一下

2.1 利用 clear屬性，清除浮動(dòng)

clear屬性是個(gè)什么東東呢？clear 屬性規(guī)定元素的哪一側(cè)不允許其它之前浮動(dòng)元素，修改一下剛才代碼

<div class="p">
    <div class="c"></div>
    <div class="c" style="clear:left;"></div>
    <div class="c"></div>
</div>

CSS怎樣清除浮動(dòng)

第二個(gè)div添加了clear:both屬性后，其左側(cè)的div（第一個(gè)div）不再浮動(dòng)，所以后面的div都還行(huan hang)了。我們可以利用這點(diǎn)兒在父容器的最后添加一個(gè)空的div，設(shè)置屬性clear:left，這樣就可以達(dá)到我們目的了。

2.1.1 添加空div清理浮動(dòng)

對(duì)我們剛才代碼稍作修改

<div class="p">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
    <div style="clear:left;"></div>
</div>

也就是在父容器最后添加

<div style="clear:left;"></div>

看看效果

CSS怎樣清除浮動(dòng)

果真好使了，有些同學(xué)看了后可能感覺(jué)奇怪，為什么想上一個(gè)例子修改第二個(gè)div

<div class="c" style="clear:left;"></div>

沒(méi)有變成這樣的效果

CSS怎樣清除浮動(dòng)

說(shuō)一下自己的拙見(jiàn)，clear:left屬性只是消除其左側(cè)div浮動(dòng)對(duì)它自己造成的影響，而不會(huì)改變左側(cè)div甚至于父容器的表現(xiàn)，在父容器看來(lái)，三個(gè)div還都是float的，所以高度依舊塌陷。但是我們?cè)谧詈筇砑恿艘粋€(gè)非浮動(dòng)的div，由于它有clear:left屬性，所以它會(huì)按照左側(cè)p不浮動(dòng)來(lái)定位自己，也就是定位到下一行，而父容器看到有一個(gè)非浮動(dòng)、普通流的子元素元素，會(huì)將其包圍，這樣造成了順便也把三個(gè)浮動(dòng)元素也包裹起來(lái)的效果，高度不再塌陷（不知道說(shuō)明白沒(méi)有或者這種理解對(duì)不對(duì)，還望明白的同學(xué)指點(diǎn)）。

當(dāng)然除了添加div，還可以添加br等其它html元素，原理相同，不再贅述。

2.1.2 使用CSS插入元素

上面的做法瀏覽器兼容性不錯(cuò)，但是有個(gè)很大的問(wèn)題就是向頁(yè)面添加了內(nèi)容來(lái)達(dá)到改變效果的目的，也就是數(shù)據(jù)和表現(xiàn)混淆，既然是變現(xiàn)，看看怎么使用CSS來(lái)解決這一問(wèn)題。根本的做法還是向父容器最后追加元素，但我們可以利用CSS的:after偽元素來(lái)做此事。

添加一個(gè)類 floatfix

.floatfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:left;
}

對(duì)父容器添加此類

<div class="p floatfix">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

這樣我們就可以看到正確效果了

CSS怎樣清除浮動(dòng)

簡(jiǎn)單解釋一下，對(duì)父容器添加floatfix類后，會(huì)為其追加一個(gè)不可見(jiàn)的塊元素，然后設(shè)置其clear屬性為left，和剛才原理類似。

2.1.3 大師手筆

Nicolas Gallagher 在A new micro clearfix hack中提供了一種看起來(lái)更清爽的做法

.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

Nicolas Gallagher原文中還有:before是為了處理margin邊距重疊，本文中沒(méi)有列出來(lái)。

有同學(xué)會(huì)提出來(lái)了上面方法看起來(lái)不錯(cuò)，但是IE6、7不支持偽元素怎們辦？這就需要我們使用BFC/haslayout的姿勢(shì)了

2.2使父容器形成BFC

經(jīng)過(guò)了前些日子園里關(guān)于BFC的狂轟濫炸相信大家都對(duì)BFC有了一定的了解，不過(guò)癮的同學(xué)可以看看 Block Format Content，BFC有三個(gè)特性

  • BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊

    按照BFC的定義，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊，這個(gè)包括相鄰元素，嵌套元素，只要他們之間沒(méi)有阻擋(例如邊框，非空內(nèi)容，padding等)就會(huì)發(fā)生margin重疊。

    因此要解決margin重疊問(wèn)題，只要讓它們不在同一個(gè)BFC就行了，但是對(duì)于兩個(gè)相鄰元素來(lái)說(shuō)，意義不大，沒(méi)有必要給它們加個(gè)外殼，但是對(duì)于嵌套元素來(lái)說(shuō)就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊了。

  • BFC不會(huì)重疊浮動(dòng)元素
  • BFC可以包含浮動(dòng)

我們可以利用BFC的第三條特性來(lái)“清浮動(dòng)”，這里其實(shí)說(shuō)清浮動(dòng)已經(jīng)不再合適，應(yīng)該說(shuō)包含浮動(dòng)。也就是說(shuō)只要父容器形成BFC就可以，簡(jiǎn)單看看如何形成BFC

  • float為left|right
  • overflow為hidden|auto|scroll
  • display為table-cell|table-caption|inline-block
  • position為absolute|fixed

我們可以對(duì)父容器添加這些屬性來(lái)形成BFC達(dá)到“清浮動(dòng)”效果

2.2.1 利用float來(lái)使父容器形成BFC

簡(jiǎn)單修改一下代碼

<div class="p" style="float:left;">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

這樣我們可以得到結(jié)果

CSS怎樣清除浮動(dòng)

我們可以看到父容器高度沒(méi)有塌陷，但是長(zhǎng)度變短了，因?yàn)閐iv應(yīng)用float‘后會(huì)根據(jù)內(nèi)容來(lái)改變長(zhǎng)度，這個(gè)在很多時(shí)候很有用，但是我們不希望有這種效果怎么辦？

2.2.2 使用BFC的其它局限

上面提到使用BFC使用float的時(shí)候會(huì)使父容器長(zhǎng)度縮短，而且還有個(gè)重要缺陷——父容器float解決了其塌陷問(wèn)題，那么父容器的父容器怎么辦？難道要全部使用folat嗎（確實(shí)有這種布局方式倒是）。BFC的幾種方式都有各自的問(wèn)題，overflow屬性會(huì)影響滾動(dòng)條和絕對(duì)定位的元素；position會(huì)改變?cè)氐亩ㄎ环绞?，這是我們不希望的，display這幾種方式依然沒(méi)有解決低版本IE問(wèn)題。。。

看起來(lái)還是第一種方式比較好，可是低版本IE該怎么辦呢？

2.2.3 hasLayout

我們知道在IE6、7內(nèi)有個(gè)hasLayout的概念，很多bug正式由hasLayout導(dǎo)致的，當(dāng)元素的hasLayout屬性值為false的時(shí)候，元素的尺寸和位置由最近擁有布局的祖先元素控制。當(dāng)元素的hasLayout屬性值為true的時(shí)候會(huì)達(dá)到和BFC類似的效果，元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位。我們可以利用這點(diǎn)兒在IE6、7下完成清浮動(dòng)，先看看怎么使元素hasLayout為true

  • position: absolute
  • float: left|right
  • display: inline-block
  • width: 除 “auto” 外的任意值
  • height: 除 “auto” 外的任意值
  • zoom: 除 “normal” 外的任意值
  • writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true

3 一個(gè)相對(duì)靠譜的解決方案

經(jīng)過(guò)上面的比較我們可以得出一個(gè)相對(duì)靠譜的解決方案

  • 在IE+、現(xiàn)代瀏覽器上使用偽元素
  • 在IE6、7使用hasLayout

具體應(yīng)該使用哪種方式來(lái)使元素hasLayout為true呢？相對(duì)而言zoom：1比較好，因?yàn)椴粫?huì)造成其它影響。想造成只在IE6、7上使用某些CSS的效果，我們還得需要一些CSS hack的知識(shí)，感興趣同學(xué)可以看看 CSS hack，我們可以寫出這樣的CSS

.floatfix{
    *zoom:1;
}
.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

4 最后

雖然我們得出了一種瀏覽器兼容的靠譜解決方案，但這并不代表我們一定得用這種方式，很多時(shí)候我們的父容器本身需要position：absolute等形成了BFC的時(shí)候我們可以直接利用這些屬性了，大家要掌握原理，活學(xué)活用?？偠灾謇砀?dòng)兩種方式

  • 利用 clear屬性，清除浮動(dòng)

  • 使父容器形成BFC

以上是CSS怎樣清除浮動(dòng)的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：CSS怎樣清除浮動(dòng)-創(chuàng)新互聯(lián)
文章鏈接：http://bm7419.com/article10/cdejdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、企業(yè)網(wǎng)站制作、電子商務(wù)、網(wǎng)站改版、動(dòng)態(tài)網(wǎng)站、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)