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高度自適應問題。

div+css之清除浮動