clear是個好孩子,只是有時候不聽話~顆顆
有時候會出現的莫名區塊,來把它KO吧!
《方法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;
}
==========================
《方法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碼會比較乾淨唷!