clear : none | left|right| both
none : 允許兩邊都可以有浮動對象
both : 不允許有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
二、div clear常用地方div{clear:left}
div{clear:right}
div{clear:both}
2、案例html代碼片段:.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è)置浮動靠右 */
<div class="divcss5">
<div class="divcss5_left">float left盒子</div>
<div class="divcss5_right">float right盒子</div>
<div class="clear"></div>
</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)友會為你解答?。?點擊進入論壇