css 浮動的複習

2021-10-10 22:05:15 字數 1152 閱讀 9447

1. 什麼是浮動

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

2.浮動的特性

浮動元素會脫離標準流(脫標)

浮動的盒子不在保留原先的位置

浮動的元素會一行內顯示並且元素的頂部對齊

浮動的元素會有行內塊的特性

任何元素都可以浮動,新增浮動之後有行內塊元素相似的特性(例如行內元素浮動了,就不需要轉換為塊級/行內塊元素,就可以直接給高度和寬度)

3.浮動元素經常和標準流父級搭配使用

1.先用標準流的父元素排列上下位置,之後內部子元素採取浮動排列左右位置,符合網頁布局第一準則

2.乙個元素浮動了,理論上其餘的兄弟元素也要浮動,以防引起問題

浮動的盒子只會影響浮動盒子後面的標準流,不會影響前面的標準流

例如:小公尺網頁

4.清除浮動

因為父級盒子在很多情況下不能給定高度,但是子盒子浮動又不占有位置,最後父級高度為0,就會影響下面的標準盒子

,所以需要清除浮動。

父級新增overflow屬性

給父級新增overflow屬性,將其屬性值設定為hidden,auto,scroll。 (優點:**簡潔,缺點:無法顯示溢位部分,直接把溢位部分切掉,顯示不了)

父級新增after偽元素

在該盒子的後面生成了乙個行內元素,改為block

父級新增雙偽元素

css複習 浮動與BFC

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。浮動的值 left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動,並會顯示在其在文字中出現的位置。...

css基礎布局複習筆記(一)浮動

浮動的定義 使元素脫離文件流,按照指定方向 左右 發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。第一種情況導致的各種布局混亂問題 浮動元素不佔位置導致的布局變化 第二種情況浮動的元素只影響他後面的元素 根據層疊順序推算 第三種情況導致的各種掉盒子問題 如果父級寬度太窄,無法容納所有元素,無法容納...

CSS浮動 浮動的特性 清除浮動

乙個頁面基本包含了三種布局方式 標準流 浮動和定位 浮動可以改變元素標籤預設的排列方式,最典型的是可以讓多個塊級元素一行內排列顯示。網頁布局第一準則 多個塊級元素縱向排列找標準流,多個塊級元素橫向排列找浮動。float屬性用於建立浮動框,將其移動到一邊,直到做邊緣或右邊緣觸及包含塊或另乙個浮動框的邊...