麻豆激情视频在线_美女中文字幕视频_777婷婷天堂综合色吧_美女av免费观看_风间由美一区二区播放合集_亚洲a在线观看无码

重慶網絡公司浮動是CSS布局中最常用的屬性，然而浮動是脫離標準流（也稱文檔流）的，如果不清除浮動的話，會對周圍的元素產生影響。也正是浮動脫離標準流這一特性，使浮動成為CSS布局的難點之一。

清除浮動有好一些方法，但兼容各種瀏覽器的方法卻不多。下面我就介紹三個比較有效的兼容的方法，這三個方法也見證了我用CSS布局的幾個階段吧。這三個方法中的某種方法可能你也在用，如果你對那種方法很熟悉了可以直接54。

我們以下面的XHTML代碼為例來說明這三種方法的用法：

<div id="box">

<div id="sidebar"></div>

<div id="main"></div>

</div>

1、額外標簽

這是我一開始使用的方法。這種方法是在浮動元素的最后加一個標簽，用這個標簽清除浮動，一般是加div：<div class="clear"></div>，當然也可以是其他標簽，比如p、br等。本例加在<div id="main"></div>的后面。對應的CSS代碼：

#box{

width:500px;

margin:10px auto;

background:#ccc;

}

#sidebar{

width:190px;

height:500px;

float:left;

background:#f00;

}

#main{

width:300px;

height:500px;

float:right;

background:#00f;

}

.clear{

clear:both;

}

點擊這查看效果

.clear有必要的時候可以這么寫：

.clear{

clear:both;

height:0;

line-height:0;

font-size:0;

}

因為在IE6下，會出現沒有內容的div仍有一定的高度情況（大概是12px吧，具體不太清楚，沒有具體研究）。

我給每個盒子都加了背景顏色，這樣能清楚的看到各個盒子的范圍和#box是否包含了#sidebar和#main。

優點：直接，W3C推薦。

缺點：添加了無語意的標簽，破壞了XHTML代碼的良好結構，對搜索引擎也無用。如果不看效果圖的話，可能不知道要把這個額外標簽加到什么地方（當然這種情況比較少，現在一般都先畫出原，而且也可以根據命名來判斷），如果以后要改版，處理這些額外的標簽會是一個麻煩。

有一篇文章《br玩轉清除浮動》，性質和這種方法是一樣的，有興趣的可以搜索一下。

2、父元素浮動

了解到第一種方法有比較多缺點之后，我選擇了這種方法。

這種方法就是把浮動元素的父元素也設浮動屬性。比如上面的#box也設浮動float:left，float:right也可以，具體的代碼是：

#box{

width:500px;

margin:10px auto;

float:left;

background:#ccc;

}

#sidebar{

width:190px;

height:500px;

float:left;

background:#f00;

}

#main{

width:300px;

height:500px;

float:right;

background:#00f;

}

點擊這里查看效果

查看效果發現沒有居中，是的，#box已經向左浮動了。我們改寫一下#box的CSS代碼，讓他能夠居中：

#box{

width:500px;

margin:10px auto;

float:left;

position:relative;

left:50%;

margin-left:-250px;

background:#ccc;

}

點擊這里查看效果

現在居中了。

優點：無需添加無語意標簽。

缺點：需要給父元定義寬度，浮動元素太多，控制不好很麻煩。。。

3、overflow:hidden

這種方法是前段時間偶然在網上發現的，我目前正在使用次方法。這種方法是給父元素加overflow:hidden屬性，為了兼容IE6，這個父元素也要加上合適的寬度。但由于不再是浮動，所以不會對周圍的元素產生影響。對應上面XHTML代碼的CSS代碼是：

#box{

width:500px;

margin:10 auto;

overflow:hidden;

background:#ccc;

}

#sidebar{

width:190px;

height:500px;

float:left;

background:#f00;

}

#main{

width:300px;

height:500px;

float:right;

background:#00f;

}

點擊這里查看效果

查看效果也沒有居中， 我們還是用改寫一下#box，點擊這里查看改寫后的效果。

優點：容易控制。

缺點：暫未發現。。。