清除浮動的方式

2022-08-12 04:09:19 字數 448 閱讀 8333

1.給設定浮動的盒子的父元素乙個overflow:hidden屬性,即可消除父元素中子元素浮動對頁面的影響。

2.使用偽元素來清除浮動

.clearfix:after {

content:"";

height:0;

line-height:0;

dispaly:block;/設定為塊級元素/

clear:both;  /清除浮動/

visibility:hidden; /將元素隱藏/

.clearfix{

zoom:1;/為了相容ie6/

3.使用雙偽元素

.clearfix:before,.clearfix:after{

content:"";

display:block;

clear:both;

.clearfix {

zoom:1

清除浮動方式

1 當父元素不設定高度時,標準流中內容高度為父元素的高度 2 但是若為浮動流,浮動流的高度不為父元素的高度。為第乙個標籤設定高度。但是這種方式並不常用,所以一般情況下不會使用。使用clear屬性來清除浮動。clear共有四個取值 none 不進行清除 left 讓浮動元素不去尋找前面左浮動的元素 r...

清除浮動的方式

現在許多 都是採用浮動的方式來編寫網頁,所以清楚如何清除浮動就顯得尤為重要。下面介紹清除浮動的六種方法。給第乙個盒子設定高度 標準流的元素會撐起父元素的高度,但是浮動流的元素是不會撐起父元素的高度的。第乙個盒子的元素全部浮動,所以導致第乙個盒子高度為0,也就是說body中第乙個元素為空,這樣第二個盒...

清除浮動的方式

清除浮動的方式常用的有三種 clearfix,clear both,overflow hidden clearfix是萬金油版本 寫法一 clearfix after寫法二 clearfix before,clearfix after clearfix after clearfixclear bot...