您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > DIV+CSS清除浮動(overflow:hidden/clear:both/:after)和margin不起作用問題

DIV+CSS清除浮動(overflow:hidden/clear:both/:after)和margin不起作用問題

文章來源：365jz.com 點(diǎn)擊數(shù)：508 更新時(shí)間：2017-12-16 10:39 參與評論

DIV+CSS clear both清除產(chǎn)生浮動
我們知道有時(shí)使用了css float浮動會產(chǎn)生css浮動，這個(gè)時(shí)候就需要清理清除浮動，我們就用clear樣式屬性即可實(shí)現(xiàn)。

一、clear語法與結(jié)構(gòu)

1、clear語法：

clear : none | left|right| both

2、clear參數(shù)值說明：

none : 　允許兩邊都可以有浮動對象
both : 　不允許有浮動對象
left : 　不允許左邊有浮動對象
right : 　不允許右邊有浮動對象

3、clear解釋：
該屬性的值指出了不允許有浮動對象的邊情況，又對象左邊不允許有浮動、右邊不允許有浮動、不允許有浮動對象。
4、css結(jié)構(gòu)

div{clear:left}
div{clear:right}
div{clear:both}

二、div clear常用地方

我們常常用于使用了float css樣式后產(chǎn)生浮動，最常用是使用clear:both清除浮動。比如一個(gè)大對象內(nèi)有2個(gè)小對象使用了css float樣式為了避免產(chǎn)生浮動，大對象背景或邊框不能正確顯示，這個(gè)時(shí)候我們就需要clear:both清除浮動。

三、css+div案例

DIVCSS5案例說明：這里設(shè)置一個(gè)css寬度（css width）為500px;盒子，css邊框（css border）為紅色，css背景（css background）為黑色、css padding為10px盒子，里面包裹著2個(gè)小盒子，一個(gè)css 浮動靠右（float:right）、一個(gè)css float靠左（float:left）,兩者邊框?yàn)榘咨尘邦伾珵榛疑?寬度為200px,css高度(css height)為150px。這樣我們來觀察案例效果，看浮動產(chǎn)生并使用clear清除浮動。

1、案例css代碼：

.divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px}
.divcss5_left,.divcss5_right{
border:1px solid #FFF;background:#999;width:200px;height:150px
}
.clear{ clear:both}
/* css注釋：這里為了截圖分別，對css代碼換行 */
.divcss5_left{ float:left}/* css注釋：設(shè)置浮動靠左 */
.divcss5_right{ float:right}/* css注釋：設(shè)置浮動靠右 */

2、案例html代碼片段：

<div class="divcss5">
<div class="divcss5_left">float left盒子</div>
<div class="divcss5_right">float right盒子</div>
<div class="clear"></div>
</div>

使用clear可以清除float產(chǎn)生的浮動，注意clear樣式對象加入位置，如上案例對“.divcss5”清除浮動，我們就只需要在此對象div標(biāo)簽結(jié)束前加入即可清除內(nèi)部小盒子產(chǎn)生浮動。而一般常用clear:both來清除浮動，其它c(diǎn)lear:left和clear:right可以下來根據(jù)clear both案例擴(kuò)展學(xué)習(xí)實(shí)踐。

:after清除浮動：

after偽類由于受到ie6 7的不支持所以大多數(shù)時(shí)候，一般都需要定義一個(gè)固定的class名設(shè)置屬性clear的值both的div 兩者配合使用.

<style type="text/css">

        *{ margin: 0; padding: 0}

        .left{ float: left;}

        .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }                                                             //偽類清除

        .clearfix { zoom:1; }

        .clearit { clear:both; height:0; font-size:0; overflow:hidden; } //設(shè)置class名清除

        .main{ width: 1000px;}

        .myRight,.myLeft{ width: 200px; height: 200px; background: #ddd;}

        .myRight{ background: red}

</style>

///////////////////////////////////////////////第一種結(jié)構(gòu)

<div class="main">

    <div class="myLeft left">左側(cè)</div>

    <div class="myRight left">右側(cè)</div>

</div>

<div class="footer">

    <p>我是底部</p>

</div>

1 此時(shí)不清除浮動標(biāo)準(zhǔn)瀏覽器和ie8+ p標(biāo)簽會跑到右側(cè)浮動div的旁邊如圖：

IE6 IE7下

我們可以看出，標(biāo)準(zhǔn)和ie8下 class名為main的div 沒被撐開，IE6 IE7下卻被浮動元素?fù)伍_了。

我們只需要解決標(biāo)準(zhǔn) 和 IE8+的浮動就可以；現(xiàn)在我們給main 追加個(gè)class名如下：

<div class="main clearfix"> // 此處追加

</div>

</div>

因?yàn)槲覀冊赾ss中設(shè)置了 .clearfix:after{..}所以浮動就不會繼承下去此時(shí)給 .main加上背景{ background:blue };

我們發(fā)現(xiàn) 標(biāo)準(zhǔn)和 IE6+ 的 main 都已被撐開如下圖：

IE6下

標(biāo)準(zhǔn)下：

其他瀏覽器下就不截圖了。

//////////////////////////////////////////第二種結(jié)構(gòu) 此時(shí)需要用到 .clearit{ ...}

*{ margin: 0; padding: 0}

.left{ float: left;}

.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } //偽類清除

.clearfix { zoom:1; }

.clearit { clear:both; height:0; font-size:0; overflow:hidden; } //設(shè)置class名清除

.main{ width: 1000px;}

.myLast,.myRight,.myLeft{ width: 200px; height: 200px; background: #ddd;}

.myRight{ background: red}

.myLast{ background:purple； height:140px}

</style>

////////此時(shí)浮動元素和不需要浮動的元素被包在同一個(gè) 父親下

</div>

IE6 下

元素繼承浮動跑到浮動元素旁邊而且有自己的背景

IE8+ 和標(biāo)準(zhǔn)

最后一個(gè)DIV沒繼承浮動但是元素內(nèi)的內(nèi)容被擋在浮動DIV后面，背景消失，鉆入浮動元素底下。

此時(shí) 給右側(cè)DIV加clearfix class名;如下圖：

</div>

標(biāo)準(zhǔn)下和ie6+ 下效果不變；

<div class="clearit"></div> //換種方法加上class為clearit的div

</div>

ie6+ 和標(biāo)準(zhǔn)下如下圖：

此時(shí) ie6+和標(biāo)準(zhǔn)下顯示效果一致浮動被清除；

這種簡單結(jié)構(gòu)的時(shí)候也可給最后一個(gè)div 設(shè)置 clear:both 這個(gè)屬性和值；也能得到此效果，

在結(jié)構(gòu)比較復(fù)雜清除頻繁的時(shí)候不如在浮動元素后面加一個(gè) <div class="clearit"></div>更方便，當(dāng)然能用after偽類清除浮動的時(shí)候盡量用偽類清除，這要既減少冗余代碼，用能便于以后修改和維護(hù)?。?！

overflow:hidden清除浮動：

說法一：

**overflow:hidden 的意思是超出的部分要裁切隱藏掉
那么如果 float 的元素不占普通流位置
普通流的包含塊要根據(jù)內(nèi)容高度裁切隱藏
如果高度是默認(rèn)值auto
那么不計(jì)算其內(nèi)浮動元素高度就裁切
就有可能會裁掉float
這是反布局常識的

所以如果沒有明確設(shè)定容器高情況下
它要計(jì)算內(nèi)容全部高度才能確定在什么位置hidden
浮動的高度就要被計(jì)算進(jìn)去
順帶達(dá)成了清理浮動的目標(biāo)
同理
overflow 非默認(rèn)值
position 非默認(rèn)值
float 非默認(rèn)值
等都是遵循這個(gè)布局計(jì)算思路.

說法二：

因?yàn)閔eight: auto;的計(jì)算結(jié)果不是一定為0的。
正常父元素包含浮動子元素，父元素的高度確實(shí)為0。
但是父元素overflow:hidden;后，首先會計(jì)算height: auto;的真實(shí)高度，由于其觸發(fā)了BFC，需要包含子元素，所以高度不是0，而是子元素高度。
這時(shí)overflow:hidden;才起到隱藏作用，不過父元素高度足夠大，所以子元素沒有被隱藏。

總之，是先計(jì)算真實(shí)高度，再去隱藏。如果是先直接隱藏了，再去計(jì)算高度也就沒有意義了。

問題描述：

　　有個(gè)頁面是這么個(gè)情況：整個(gè)頁面一個(gè)大的table，兩列td，左側(cè)一列td是一些常規(guī)的鏈接和圖片，右邊一個(gè)td里是一排一排的圖片，因?yàn)槭窃谟覀?cè)一列的td里插入一排一排的圖片，所以我就想在td里插入一個(gè)div，然后寫li，用li來布局這些圖片···就這樣一個(gè)簡單布局的頁面卻遇到一個(gè)奇怪的問題：我將右側(cè)一列td插入的這個(gè)div設(shè)置了margin:10px;按常理說，上下左右都應(yīng)該有10px的邊距，但在預(yù)覽的時(shí)候卻發(fā)現(xiàn)，margin- bottom并沒有起作用！
分析原因：
　　百度一下，找到BI里的一篇帖子，終于明白是由于div里的li浮動造成的，我將li的浮動去掉，果然margin-bottom就起作用了。但問題是我現(xiàn)在就是需要對li進(jìn)行浮動。好，那么接下來，我們解決問題···
解決問題：
　　幾個(gè)哥們兒回帖，說是可以用clear:both來解決，于是，我試了一下在這個(gè)div后面加上
總結(jié)：
　　我總結(jié)了一下，問題是這樣的：在td里插入div，div里有元素浮動造成margin不起作用，那我們就清除浮動，讓里面的margin起作用。
　　如果div里有元素進(jìn)行了任何浮動，你即使設(shè)置了div的margin值，margin-bottom值也不會起作用，至于為什么只有margin- bottom不起作用，那是因?yàn)槟銓⑦@個(gè)div浮動到左側(cè)（前面問題描述里div中的li就float:left）的時(shí)候，而這個(gè)div是沒有任何后續(xù)東西跟在后面的···不知道我這樣的解釋過不過關(guān)，呵呵···
　　還有，這個(gè)解決辦法也適用于div里嵌套div，也就是這樣的結(jié)構(gòu)：
　　