五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

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

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

文章來源:365jz.com     點擊數(shù):508    更新時間:2017-12-16 10:39   參與評論
DIV+CSS clear both清除產(chǎn)生浮動
我們知道有時使用了css float浮動會產(chǎn)生css浮動,這個時候就需要清理清除浮動,我們就用clear樣式屬性即可實現(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清除浮動。比如一個大對象內(nèi)有2個小對象使用了css float樣式為了避免產(chǎn)生浮動,大對象背景或邊框不能正確顯示,這個時候我們就需要clear:both清除浮動。

三、css+div案例

DIVCSS5案例說明:這里設(shè)置一個css寬度(css width)為500px;盒子,css邊框(css border)為紅色,css背景(css background)為黑色、css padding為10px盒子,里面包裹著2個小盒子,一個css 浮動靠右(float:right)、一個css float靠左(float:left),兩者邊框為白色,背景顏色為灰色,寬度為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標簽結(jié)束前加入即可清除內(nèi)部小盒子產(chǎn)生浮動。而一般常用clear:both來清除浮動,其它clear:left和clear:right可以下來根據(jù)clear both案例擴展學習實踐。

:after清除浮動:

after偽類由于受到ie6 7的不支持所以大多數(shù)時候,一般都需要定義一個固定的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  此時不清除浮動 標準瀏覽器 和ie8+  p標簽會跑到 右側(cè)浮動div的旁邊 如圖:

IE6 IE7下 

 

我們可以看出,標準和ie8下 class名為main的div 沒被撐開,IE6 IE7下卻被浮動元素撐開了。

我們只需要解決 標準 和 IE8+的浮動 就可以;現(xiàn)在我們給main 追加個class名如下:

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

 

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

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

</div>

 

<div class="footer">

    <p>我是底部</p>

</div>

 

因為我們在css中設(shè)置了 .clearfix:after{..}所以浮動就不會繼承下去 此時給 .main加上背景{ background:blue };

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

IE6下

標準下:

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

 

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

<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;}

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

        .myRight{ background: red}

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

</style>

////////此時浮動 元素 和 不需要浮動的元素 被包在同一個 父親下

 

<div class="main">

 

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

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

 

    <div class="myLast">最后一個</div>

</div>

IE6 下

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

 

 

IE8+ 和標準

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

 

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

<div class="main">

 

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

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

 

    <div class="myLast">最后一個</div>

</div>

標準下和ie6+ 下 效果不變;

 

<div class="main">

 

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

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

 

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

 

    <div class="myLast">最后一個</div>

</div>

 

ie6+ 和標準下 如下圖:

 

此時 ie6+和標準下 顯示效果一致  浮動被清除;

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

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

overflow:hidden清除浮動:

說法一:

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

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

說法二:

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

總之,是先計算真實高度,再去隱藏。如果是先直接隱藏了,再去計算高度也就沒有意義了。

問題描述:

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

《div》
  《div style="float:left; margin:10px;"》sdsdsdsdsdsd《/div》
  《div style="clear:both;"》《/div》
  《/div》

如對本文有疑問,請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答?。?點擊進入論壇

發(fā)表評論 (508人查看,0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴禁發(fā)布色情、暴力、反動的言論。
昵稱:
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學習

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時間:9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號