css布局 清除浮動的常用方法

2022-02-22 08:50:40 字數 1028 閱讀 9799

1

<

div

class

="container"

>

2<

div

class

="block1"

>子元素1

div>

3<

div

class

="block2"

>子元素2

div>

4div

>

.block1.block2

如上圖,在使用div+css寫頁面的時候,經常要使用float樣式進行左右分欄布局。但是在子元素應用float樣式之後,父元素的高度會因為浮動而消失,因此往往需要採取一些方法來清除浮動。現整理方法如下:

(1)浮動元素後面新增空標籤,並為標籤新增樣式如下所示:

<

div

class

="container1"

>

<

div

class

="block1"

>子元素1

div>

<

div

class

="block2"

>子元素2

div>

<

div

class

="clear"

>

div>

div>

/*

子元素的樣式不變

*/.block1.block2

/*新添空標籤的樣式為clear

*/.clear

(2)為包含浮動元素的父元素新增樣式(如下所示),zoom是為相容ie6:

.container

(3)為包含浮動元素的父元素偽類新增樣式(如下所示),新添樣式缺一不可:

.container:after

(4)為父元素新增樣式,該方法不推薦!!!

CSS清除浮動常用方法

css開發過程中清楚浮動是難以避免要使用的,今天犧牲午覺的時間整理一下吧!一 給父級加高度 這樣肯定不存在父級坍塌的問題了 問題 擴充套件性不好,如果要自適應高度就悲催了。二 讓父級浮動 父級和子級都浮動就不存在這個問題了 問題 頁面中所有元素都加浮動,margin左右自動失效 floats bad...

CSS清除浮動的常用方法

浮動溢位和高度塌陷 因為浮動會使當前標籤產生向上浮的效果,同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同,這樣讓清除浮動更難了。解決浮動引起的問題有多種方法,但有些方法在瀏覽器相容性方面還有問題。11111111 222222...

CSS布局之浮動 清除浮動

1.2 浮動 float 小結 1.3 浮動 float 的應用 重要 1.4 浮動 float 的擴充套件 2.清除浮動 2.4 清除浮動總結 概念 元素的浮動是指設定了浮動屬性的元素會 脫離標準普通流的控制 移動到指定位置。作用 讓多個盒子 div 水平排列成一行,使得浮動成為布局的重要手段。可...