前端應用 css 浮動特性

2021-09-25 15:40:03 字數 918 閱讀 8165

了解浮動之前得先知道什麼是文件流。

文件流是指: 盒子按照html標籤編寫的順序依次從上到下,從左到右,塊元素佔一行,行內元素在一行之內 從左到右依次排列,

每個盒子都佔自己的位置。

浮動分為兩種 乙個是左浮動 ,另乙個是右浮動

浮動元素 遇到 無論什麼型別元素都要停下來。

浮動元素 能讓內聯元素 或者 塊元素轉化為 內聯塊元素 同時具有兩者的特性

相鄰浮動的塊元素可以並在一行 超出父元素的寬度 自動換行

浮動元素和不是浮動元素呆在一起 能形成繞圖效果

每個特性我都用例子介紹,方便理解

2,3,4 可以 在乙個例子 全部體現出來。

12

11我是乙個元素11

效果如下:

塊元素 真的排列在一行, 內聯元素 也具備了 width 和height 特性, 當不夠的時候 真的換行了, 碰到有邊界的時候 也停止了。

2 是靠右浮動, 直接跳過了 文件流。

下邊演示 浮動繞圖的效果。

11. 浮動分為兩種 乙個是左浮動 ,另乙個是右浮動

2. 浮動元素 遇到 無論什麼型別元素都要停下來。

3. 浮動元素 能讓內聯元素 或者 塊元素轉化為 內聯塊元素 同時具有兩者的特性

4. 相鄰浮動的塊元素可以並在一行 超出父元素的寬度 自動換行

5. 浮動元素和不是浮動元素呆在一起 能形成繞圖效果

效果如下:

繞圖浮動慎用, 不好控制。

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

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

css浮動特性(難點)

加了浮動之後的元素,會具有很多特性,需要我們掌握 1.浮動元素會脫離標準文件流 脫標 2.浮動的元素會一行內顯示並且元素頂部對齊 3.浮動的元素會具有行內塊元素的特性 設定了浮動 float 的元素最重要特性 1.脫離標準流的控制 浮 移動到指定位置 動 俗稱脫標 2.浮動的盒子不再保留原先的位置 ...

前端學習 Css 浮動

塊元素在文件流中預設垂直排列,所以這個三個div自上至下依次排開,如果希望塊元素在頁面中水平排列,可以使塊元素脫離文件流。使用float來使元素浮動,從而脫離文件流 可選值 none,預設值,元素預設在文件流中排列。left,元素會立即脫離文件流,向頁面的左側浮動。right,元素會立即脫離文件流,...