clear是個好孩子，只是有時候不聽話～顆顆
有時候會出現的莫名區塊，來把它KO吧! 

嘿嘿.png  

《方法1》

<p>內容</p>
<p>內容</p>
<div class="clear"></div>

==========================

P{
　　float:left;

}

.clear{
　　clear:both;

}

==========================

IE9和IE6有時clear的下方會出現一塊空白
加上以下屬性可以消除!!! 

.clear{
　　clear:both;
　　height:0px;
　　margin:0;
　　padding:0;
　　width:0;
　　border:none;
　　overflow:hidden;

}

==========================

分隔線-藍.gif  

《方法2》

<div class="clearfix">
　　<p>內容</p>
　　<p>內容</p>
</div>

==========================

.clearfix:after {
　　content: ".";
　　display: block;
　　clear: both;
　　visibility: hidden;
　　line-height: 0;
　　height: 0;
}
.clearfix {display: inline-block;}
 html[xmlns] .clearfix {display: block;}
 * html .clearfix {height: 1%;}

==========================

用方法2 的HTM碼會比較乾淨唷!

拍手.gif  

arrow
arrow
    全站熱搜

    阿摸摸 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄