當元素有浮動屬性時,會對其父元素或后面的元素產生影響,
會出現一個布局錯亂的現象,可以通過清除浮動的方法來解決浮動的影響。
浮動的清理(clear):
值:
none:默認值。允許兩邊都可以有浮動對象;
left:不允許左邊有浮動對象;
right:不允許右邊有浮動對象;
both:左右兩側不允許有浮動對象。
清除浮動的方法:
1.額外標簽法
這種方法應該是最簡單的一種了,w3c建議在容器的末尾增加一個“clear:both"的元素
強迫容器適應它的高度以便裝下所有的float元素。
<div id="main">
<div id="left"></div>
<div id="right"></div>
<div class="clear"></div>
</div>
<div id="footer"></div>
.clear{clear:both;}
2.父元素添加overflow:hidden;
注:如果子元素使用了定位布局,就會很難實現。
3.利用偽對象after方法
定義一個類,使用偽對象after,控制浮動元素的影響。
網上最流行的清除浮動代碼:
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:'';
}
.clearFix{zoom:1;} /*解決ie6/7兼容問題*/
css溢出的使用
設置對象的內容超過其指定高度及寬度時,如何管理內容。
overflow:visible【默認值,不剪切內容也不添加滾動條】
auto【在必需時,對象內容才會被剪切或添加滾動條】
hidden【不顯示超過對象尺寸的內容】
scroll【總是顯示滾動條】
zoom屬性:只有ie內核的瀏覽器支持,縮放比例。
設置或檢索對象的縮放比例。
語法:normal【默認值,使用對象的實際尺寸】;number【百分數|無符號浮點實數。浮點實數
為1.0或百分數為100%時相當於此屬性的normal值
zoom:1解決ie6高度自適應問題。