頁面布局中常用的清除浮動的方法

2022-07-29 03:36:12 字數 2416 閱讀 8274

我們在頁面布局時,基本上都避免不了使用float,但由此也會引發一些問題,尤其是在容器高度不固定時,此時它的高度完全是由內部的元素撐開的。如果內部元素還是浮動的,那麼由於內部的元素脫離了文件流,父容器就不能被撐開了。如果父容器設定的有背景或者邊框的話,此時就不能正常顯示了,另外,父容器下邊的其他容器或內容也會跟著向上「浮」, 佔據上面的子容器應該佔據的位置。那麼,這時就需要清除浮動了。

這裡總結的幾種的方法主要就是針對類似於上面的問題的,但也不僅限於以上問題。主要有以下幾種方法:

1、設定空標籤

2、父容器設定display: inline-block

3、父容器設定overflow值auto或hidden

4、clearfix方法

下面就根據乙個例子分別看一下吧。

例子:html結構是這樣的:12

3456

<divclass="cont1">

<divclass="cols1">cols1

<divclass="cols2">cols2

cont1

<divclass="cont2">cont2

cont1高度不固定,cols1和cols2浮動,cont2高度固定在cont1下面。

不清除浮動時的效果:

理想效果:

下面就分別用幾種方法實現一下:

方法一:設定空標籤

我們在容器cont1的最後面新增空標籤clear:12

3456

7<divclass="cont1">

<divclass="cols1">cols1

<divclass="cols2">cols2

cont1

<divclass="clear">

<divclass="cont2">cont2

然後對clear新增css:12

3.clear

ok,這樣就行了。

方法二:父容器設定display: inline-block

只需對父容器新增css屬性display: inline-block; 就行了12

345.cont1

方法三:父容器設定overflow值auto或hidden

只需對父容器新增屬性overflow: auto; 或者 overflow: hidden;12

345.cont1

方法四:clearfix方法

此時需要寫乙個clearfix的類:12

3456

789.clearfix:before,

.clearfix:after

.clearfix:after

然後在cont1裡面掛載上clearfix類就可以了。

CSS中常用的清除浮動(閉合浮動)的方法

1.使用空標籤清除浮動。即 這種方法在大部分環境下可以使用,但是在有些情況下會出現相容問題 ie6瀏覽器當中,div即使是空的,也會存在預設行高。解決辦法 設定其高度為0,並設定overflow hidden。它的主要弊端在於在頁面中增加了乙個無意義的元素 2.使用overflow hidden 此...

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

1 div class container 2 div class block1 子元素1 div 3 div class block2 子元素2 div 4div block1.block2 如上圖,在使用div css寫頁面的時候,經常要使用float樣式進行左右分欄布局。但是在子元素應用flo...

浮動布局及清除浮動的方法

浮動元素的特點 1.脫離標準流的控制,浮動的盒子不再保留原先的位置 2.行內元素具有浮動,可直接設定寬高屬性 3.塊級元素沒設定寬度,預設寬度和父級一樣寬,但是新增浮動後,大小由內容決定 4.浮動的盒子中間沒有空隙為什麼清除浮動 很多情況下,父元素不方便設定高度,高度由子元素撐起,但子元素浮動,就會...