css之浮動與定位

2021-07-30 07:36:48 字數 1352 閱讀 7818

文件布局中,常常用到浮動與定位。

一、浮動

浮動使塊級元素從正常文件流中刪除,向左或向右浮動。但是其他元素會環繞該元素,因此仍然會影響布局。浮動元 素相對與包含塊的內邊界(內容區)進行浮動。

浮動可以用於使塊級元素排成一列,也可以形成兩列或三列布局。

注意問題:浮動元素時,可能會出現父元素容器塌陷的問題。也就是說,當容器內的全部元素浮動(會導致父容器高 度為零)或者內部不浮動的元素不足以撐起父容器時,父容器高度會為0或者不足以滿足我們對頁面布局的要求,與後面的元素會發生重疊。

對於非替換元素浮動時,通常會指定寬度。

解決方法:1.將父元素的overflow設定為hidden或auto。overflow:hidden/auto

2.給父元素設定乙個寬度。

3.設定父元素浮動(不推薦)

二、定位

position的值為static(預設)、relative、absolute、fixed。通過top、bottom、left、right改變位置。

a:static:正常流中的位置。元素框正常生成。

b :relative:相對於正常流中的位置進行定位。原來的位置仍保留。

c:absolute:元素從正常流中完全刪除,相對於其包含塊進行定位。包含塊為最近的position值不是static的祖先 元素

分為三種情況:

第一種:若祖先元素是塊級元素則包含塊為該元素的內邊距邊界(即邊框界定的區域)

第二種:若祖先元素是行內則包含塊為該元素的內容邊界

第三種:若沒有祖先元素,則包含塊為初始包含塊(html元素,有些瀏覽器會是body元素)。

d:fixed:相對於視窗定位

三、例子

實現如下的效果圖:

左邊的樣式的**:

右邊樣式的**:

1.相當於header定位

2.相對於最近包含塊定位

3.該**並不能正確顯示該效果。

CSS浮動與定位

浮動 如果希望塊元素在頁面中水平排列,使用float浮動元素,脫離文件流 可選值 none 預設,元素在文件流中排列 left 元素脫離文件流,向頁面左側浮動 right 元素脫離文件流,向頁面右側浮動 元素浮動後,下邊的元素會立即向上移動 a浮動後,b會直接頂到上面 元素浮動後不會超出父元素邊框和...

CSS浮動與定位

css浮動 clear 向哪邊浮動,清除哪邊 clear left 在左側不允許浮動元素。clear right 在右側不允許浮動元素。clear both 在左右兩側均不允許浮動元素 clear none 預設值。允許浮動元素出現在兩側。clear inherit 規定應該從父元素繼承 clear...

CSS浮動與定位

1.1浮動 浮動 是指設定了浮動屬性的元素會脫離標準標準流的控制,移動到其父元素中指定位置的過程。它可以讓任何盒子可以在一行排列,目的用來布局。在css中,通過float屬性來定義浮動,其基本語法格式如下 float none left right選擇器 屬性值描述 left 元素向左浮動 righ...