CSS 小結筆記之清除浮動

浮動是乙個非常好用的屬性，但是有時會出現一些問題，需要進行清除浮動。例如

在父盒子沒有給出高度的情況下，子盒子浮動不會將父盒子撐開來。

清除浮動使用clear:left|right|both一般使用clear：both，具體方法如下：

1、在浮動標籤後邊新增乙個額外的clear標籤例如

這樣做的方法

例如

<

body
>
<
div 
class
="fa"
>
aaa        
<
div 
class
="son1"
>
div>
<
div 
class
="son2"
>
div>
<
div 
style
="clear:both"
>
div>
div>
<
div 
class
="div2"
>
div>
body
>

結果如下，這種方法簡單明瞭，但是會增加額外的標籤

2、父級新增overflow:hidden|auto|scroll 

在.fa 的css屬性中增加overflow:hidden ，結果也如上圖所示，例如

.fa

3、使用after偽元素進行清除浮動

.clearfix:after .clearfix

4、同時使用after和before清除浮動

.clearfix:before,

.clearfix:after .clearfix:after .clearfix 

第3、4種方法都是目前常用的方法，不增加多餘標籤，但是ie6和ie7不支援after，需要使用zoom：1來清除浮動

更多專業前端知識，請上

【猿2048】www.mk2048.com

css學習筆記之浮動清除

說到浮動，不得不說一下bfc block formatting context 翻譯為 塊級格式化上下文 關於bfc的原理，我參考了此篇文章，bfc參考資料 大家有需要可以去看看。清除浮動 子層 底部 這種方法雖直接讓底部的div擠到下方，並沒有真正的清除浮動，但可以達到清除浮動的效果。清除浮動 子...

css浮動清除筆記

1.在文件流中內容的高度可以撐起父元素的高度 2.在浮動流中浮動的元素是不可以撐起文件流父元素的高度 如果父元素也是浮動的就可以 可以看到將p元素設定浮動之後，並沒有撐起父元素div 我是文字1 我是文字1 我是文字1 我是文字2 我是文字2 我是文字2 根據浮動排列的規則和浮動不能撐起父元素的高度...

CSS之清除浮動

標籤可以是div br hr 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。優點 簡單，少，瀏覽器相容性好。缺點 需要新增大量無語義的html元素，不夠優雅，後期不容易維護。在浮動元素下加 clear，但是在ie6下，塊元素有最小高度，即當hei...