css浮動與定位

在介紹css浮動與定位之前，先來了解一下文檔流和非文檔流

文檔流

文檔流，是指元素排版布局過程中，元素會自動從左到右，從上往下的流式排列。并最終窗體自上而下分成一行行，并在每行中按從左到右的順序排放元素。脫離文檔流即是元素打亂了這個排列，或是從排版中拿走。

標準流的特點：1.塊級元素從上到下，獨占一行

2.行內元素，行內塊級元素從左到右在一行中顯示。

3.占位置。

非文檔流

網頁中大部分對象默認是占用文檔流，也有一些對象是不占文檔流的，比如表單中隱藏域。當然我們也可以讓占用文檔流的元素轉換成不占文檔流，這就要用到CSS中屬性position、float、display來控制。默認情況下，所有元素都處在文檔流中，四種情況將使得元素離開文檔流：浮動float、絕對定位absolute、固定定位fixed、元素不顯示display:none，這種情況不占文檔流的空間，而普通元素的位置基于文檔流。

float

一、浮動 ? ?（float）

會使元素向左或向右移動，其周圍的元素也會重新排列。

語法： float:none/left/right;

浮動指：

將元素排除在普通流之外

元素將不在頁面中占據空間

將浮動元素放置在包含框的左邊或者右邊

浮動元素依舊位于包含框之內

浮動的特點

浮動的框可以向左或者向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止

浮動元素的外邊緣不會超過其父元素的內邊緣

浮動元素不會互相重疊

浮動元素不會上下浮動

行內元素浮動后會變為塊級元素

舉個例子

當框1向左浮動時，它脫離文檔流并且向左移動，直到它的左邊框碰到包含框的左邊緣

為了驗證框二是否隱藏，我加了個margin屬性設置為10px，可以看出確實隱藏在下面

具體實現代碼：僅供參考

包含框中有三個元素，如果把框1向右浮動，則它脫離文檔流并且向右移動，直到它的右邊框碰到包含框的右邊框

如果把三個框都向左移動，那么框1向左浮動直到遇到包含框，另外兩個框向左浮動直到碰到前一個浮動框，三個框在同一行顯示

如果包含框太窄，那么其他浮動塊會自動向下移動，直到有足夠的空間（左圖） 如果浮動元素的高度不同，那么當他們向下移動時可能被其他浮動元素卡住（右圖）

CSS 清除浮動：

描述：清除浮動是在使用了浮動之后必不可少的，為了網站布局的效果，清除浮動也變得非常麻煩。

屬性：clear 值：left、right、both

清除浮動的常用方式：

1.結尾處加空div標簽 clear:both （或在下一個元素上加clear:both;）

2.浮動元素的父級div定義 偽元素::after （content: ""; display: block; clear: both;)

3.浮動元素的父級div定義 overflow:hidden

4.浮動元素的父元素定高

display

display屬性

根據CSS規范的規定，每一個網頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為“block”，稱為塊元素，而span元素的默認display屬性值為“inline”，稱為“行內”元素。

塊元素與行元素是可以轉換的，也就是說display的屬性值可以由我們來改變 。

display常見屬性值

1. none：隱藏對象

2. inline：指定對象為內聯元素

3. block：指定對象為塊元素

4. inline-block：指定對象為內聯塊元素

5. table-cell：指定對象作為表格單元格

6. flex：彈性盒

舉個栗子：

如果把三個框都行內塊顯示

position 定位

position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。

相對定位

設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間

絕對定位

絕對定位使元素的位置與文檔流無關，因此不占據空間。

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。

用一句話概括就是：子絕父相

固定定位

fixd：固定定位，相對于瀏覽器窗口進行定位，脫離原來的文檔流

z-index堆疊順序

一旦修改了元素的定位方式，則元素可能會發生堆疊

可以使用z-index屬性來控制元素框出現的重疊順序

z-index僅能在定位的元素上生效

z-index屬性： 值為數值，數值越大表示堆疊順序越高，即離用戶越近 可以設置為負值，表示離用戶更遠 ，一般不要設置

關于css浮動與定位就說到這里了，如有不足之處，歡迎指正！

感恩能與大家在華為云遇見！希望能與大家一起在華為云社區共同成長。

CSS HTML5

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。