div+css之清除浮動


當元素有浮動屬性時,會對其父元素或后面的元素產生影響,
會出現一個布局錯亂的現象,可以通過清除浮動的方法來解決浮動的影響。

浮動的清理(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高度自適應問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM