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 水平排列成一行,使得浮動成為布局的重要手段。可...