理解CSS浮動float 定位position

2022-09-25 22:48:10 字數 2413 閱讀 5184

一 . 浮動float

i . 定義及規則

float預設為none,對應標準流的情況。當float : left;時,元素就會向其父元素的左側靠緊,脫離標準流,同時寬度不再伸展至充滿父容器,而是根據自身內容來確定。

ii . 演示規則

準備**

xml/html code複製內容到剪貼簿

wxdwhjv

1、中間給#father加上position:absolute,是為了消除未定位父div的margin-top傳遞問題,相關內容如下

巢狀div中margin-top轉移問題的解決辦法

在這兩個瀏覽器中,有兩個巢狀關係的div,如果外層div的父元素padding值為0,那麼內層div的margin-top或者margin-bottom的值會「轉移」給外層div。

xml/htmlwxdwhjv code複製內容到剪貼簿

原因:盒子沒有獲得 haslayout  造成 margin-top無效

解決辦法:

1、在父層div加上:overflow:hidden;

2、把margin-top外邊距改成padding-top內邊距 ;

3、父元素產生邊距重疊的邊有不為 0 的 padding 或寬度不為 0 且 style 不為 none 的 border。

父層div加: padding-top: 1px;

4、讓父元素生成乙個 block formating context,以下屬性可以實現

* float: left/right

* position: absolute

* display: inline-block/table-cell(或其他 table 型別)

* overflow: hidden/auto

父層div加:poswxdwhjvition: absolute;

顯示效果為

2、1,2的float分別為left right時,有

可見1,2脫離標準流,標準流中的son3當他們不存在,於是son3代替原來son1的位置,而son1的左border、son2的右border與son3的左右border重合

3、當1,2,3全都float left時

文字圍繞著float過的div

4、1,2左浮動,3右浮動,當視窗寬度減小時,3會被擠下來

當3左浮動,2右浮動的時候,顯示為

當瀏覽器視窗寬度減小時,猜猜誰會被擠下來,son2麼?

答案還是son3,規則為 : 寫在html檔案中後面的會被擠下來,在html檔案中,son3在son2後面,因此總是son3先擠下來。

5、增加son1高度,son3擠下來時會卡在那裡

6、刪除盒子中的文字,3個子div全部左浮動

顯示為父div中的三個子div全部脫離標準流了,父div就縮成一條線了,可以用clea程式設計客棧r來修正

加乙個margin-padding-border全為0,clear為both的空div,來撐大父div

iii . clear清除浮動

如果前面有float:left的元素,他會影響下面元素,如上例中的p,在p元素中寫clear : left即可消除前面左浮動元素對本元素的影響.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static

這個是預設的,即標準流排下來,就是static定位方式.

2. fixed

在瀏覽器視窗中固定,什麼論壇中的[回到頂部]這種按鈕就是fixed做的

練習做個回到頂部玩玩

css code複製內容到剪貼簿

顯示效果

3. relative相對定位

相對於自己的偏移,而且不脫離標準流,使用top/bottom left/right指定偏移量

4. absolute絕對定位

根據別的已定位元素進行定位,應用absolute規則的脫離標準流

1)、這個別的元素:

離它最近的已定位的祖先元素 或者 瀏覽器視窗,當找不到前面的祖先元素時,就以後者瀏覽器視窗來定位.

2)、已經定位 : 是指position已經設定,而且不是static...即position值不為static就是已經定位的元素,未設定position或設定為static認為它沒有定位.

trick

只設定 position : absolute,而不設定top/bottom/left/right值,那麼元素會保持在原地,但是已經脫離標準流.

三 . display

display取值有inline block none

設定為none,即可將其隱藏,像inline-block等新新增的

原文**:

本文標題: 理解css浮動float、定位position

本文位址: /web/css/23845.html

浮動float,定位position理解

浮動,定位可以實現網頁的排版 float屬性總結 使用場景一 實現網頁中併排布局 特點 實現左右併排時 1 當父元素足夠寬度足夠時,則依次布局 2 浮動的元素佔據空間的寬度就是內容的寬度 缺點 影響 父元素高度塌陷 原因 子元素 清除浮動方法 1 可以增加父元素的高度 2 可以增加乙個空的div,然...

深入理解浮動定位 float

css網頁布局有兩種方式 一種是浮動式布局 另外一種是定位布局。這兩種方式的核心都脫離於文件流的控制。前提 文件流 document flow 對於乙個xhtml網頁,body元素下的任意元素,根據其前後順序,組成了乙個個上下關係,簡單說這就是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置...

float浮動,定位

1 浮動定位 1 普通流定位 普通流,由稱為文件流 塊級元素 從上到下乙個乙個的排列 行內元素 一行內從左到右的排列 2 浮動定位 2.1 什麼是浮動定位 將元素排列在普通流之外,即脫離文件流 浮動元素不會佔據頁面空間 浮動元素會放置在 包含框 的左邊或右邊 浮動元素依舊位於包含框之內 浮動元素可以...