了解浮動之前得先知道什麼是文件流。
文件流是指: 盒子按照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,元素會立即脫離文件流,...