2020 11 02 學習總結 浮動與清除浮動方法

2021-10-10 04:54:04 字數 1400 閱讀 8248

元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。

乙個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

float屬性指定乙個盒子(元素)是否應該浮動。

定義和用法

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css

中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定乙個明確的寬度;否則,它們會盡可能地窄。

img 

效果如下:

我們給子元素新增浮動後,子元素脫離文件流高度為0,使父元素高度為0,由於父級元素沒有高度,下面的元素會頂上去,造成頁面的塌陷。也就是下面的元素在視覺上被浮動元素擋住。

清除浮動方法

一, 利用clear樣式

定義和用法

clear 屬性規定元素的哪一側不允許其他浮動元素。

給元素下面的新增乙個空盒子,或者在下乙個盒子裡新增

class

="outer"

>

class

="div1"

>

1div

>

class

="div2"

>

2div

>

class

="div3"

>

3div

>

class

="clear"

>

div>

div>

屬性clear:both

.clear

二,父級div定義 overflow: hidden
.topdiv
當然最簡單的還是給父元素新增高度啦。

由於本人還在學習階段水平有限,部落格錯誤之處,煩請指正!

浮動與清除浮動總結

清除浮動 浮動 左浮動 右浮動 浮動會使塊元素脫離標準流,可以讓多個塊在同一行顯示,下方的標準流盒子會上浮到給了浮動的盒子下面 類名當布局需要多個塊級元素需要一行顯示的時候可以使用浮動 在開發過程中我們經常將其定義在common.css中,其定義如下 fl fr在同級多個元素需要浮動的時候,直接在類...

HTML學習總結(4) 浮動,清浮動

html學習總結 4 浮動 清除浮動 使元素脫離文件流,按指定方向移動,遇到父級邊界或相鄰浮動元素停下 float浮動 清除浮動的方法 box box box clear clear all 浮動元素下加 clear after clear 加這裡 box 浮動相容性問題 ie6雙邊距 ie6下塊屬...

css學習總結(一) 浮動

float屬性可以使塊元素位於頁面同一行內,但也存在以下問題 1.是否每行中所有同級塊元素都要加float屬性 2.當float元素後面的塊元素如何換行 3.當頁面 父元素 寬度縮小得比同行所有塊元素寬度 包括margin和padding 之和要小時,後面的塊元素會自動換行 解決以上問題的方法為 問...