css3 清除浮動

2022-08-27 08:03:12 字數 951 閱讀 3358

eg:三個div,父級div下面有兩個div分別float:left和float:right

1

<

style

>

2.container

3.fl

4.fr

5style

>

6<

body

>

7<

div

class

="container"

>

8<

div

class

="fl"

>向左浮動

div>

9<

div

class

="fr"

>向右浮動

div>

10div

>

11body

>

***:

1、背景不能顯示 由於浮動產生,如果對父級設定了(css background背景)css背景顏色或css背景,而父級不能被撐開,所以導致css背景不能顯示。

2、邊框不能撐開 如上圖中,如果父級設定了css邊框屬性(css border),由於子級裡使用了float屬性,產生浮動,父級不能被撐開,導致邊框不能隨內容而被撐開。

3、margin padding設定值不能正確顯示 由於浮動導致父級子級之間設定了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。

解決方法:

一、子div末尾加上

;二、父div加上overflow:hidden屬性。(由於overflow:hidden屬性相當於是讓父級緊貼內容,這樣即可緊貼其物件內內容(包括使用float的div盒子),從而實現了清除浮動。推薦使用)

CSS3 清除浮動

一 目的 通過本文,讓大家可以明白清除浮動的原理和幾種方法,最後得出一種本文認為最好用的方法。本文也會同步到我的個人 二 內容簡介1 引入,還原浮動本來的意義 2 說明,實際開發中常用浮動來做什麼 3 提問,為什麼要清除浮動 4 回答,如何清除浮動以及常用的幾種方法 5 結論,得出本文認為最好用的方...

CSS3浮動與清除浮動

浮動的設計初衷 實現文字環繞效果。浮動的特徵 脫離標準文件流,導致父元素高度塌陷,向左或者向右浮動直到遇到其他的浮動元素。浮動產生的原因 盒子裡的子元素使用了浮動屬性,脫離了文件流,導致父元素無法被撐開。浮動造成的 父級的背景無法顯示,父級的邊框無法被撐開,以及父級與子級之間的margin和padd...

CSS3清除浮動3種方法

浮動這裡要好好琢磨一下,挺麻煩,但是不難。問題 如果乙個父容器,兩個子容器div,兩個子容器為了顯示,乙個左浮動,乙個右浮動,兩個子容器都脫離了文件流,造成父容器沒有元素,這種情況下該怎麼做?問題如下圖 兩種方法 1,在兩個div後再設定乙個div,並且不設定寬高 寬高為0 然後清除上面兩個div浮...