简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS float 浮動屬性

高洛峰
發布： 2017-02-10 15:35:24
原創
2137 人瀏覽過

　　本篇主要介紹float屬性：定義元素朝哪個方向浮動。

目錄：

1. 頁面版面方式：介紹文件流程、浮動層以及float屬性。

2. float:left ：介紹float為 left 時的版面方式。

3. float:right ：介紹float為 right 時的佈局方式。

4. 相鄰元素含有float屬性：介紹相鄰元素含有float屬性時的佈局方式。

 

1. 頁面佈局方式

頁面佈局方式，主要包含：文件流程、浮動層、float屬性。

1.1 文檔流

HTML頁面的標準文檔流(預設版面)是：從上到下，從左到右，遇塊(區塊級元素)換行。

 

1.2 浮動層

浮動層：給元素的float屬性賦值後，就是脫離文檔流，進行左右浮動，緊貼著父元素(預設為body文本區域)的左右邊框。

而此浮動元素在文檔流空出的位置，由後續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。

 

1.3 float 屬性介紹

　　① left ：元素向左浮動。

　　② right ：元素向右浮動。

　　③ none ：預設值。

　　④ inherit ：從父元素繼承float屬性。

 

1.4 例

 CSS float 浮动属性 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>2.3-float属性</title>
    <style type="text/css">
        #a        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d         {
            background-color:Gray;
            height:50px;
            width:400px;
         }

    </style></head><body><p id=a >p-a</p><p id=b>p-b</p><p id=c>p-c</p><input type="text" value="input1"  /><input type="text" value="input2" /><input type="text" value="input3 " /><p id=d>p-d</p><input type="text" value="input4 " /></body></html>
登入後複製

 

2. float:left

 

2. float:left

2.1 程式碼變更

input2 新增：float:left

p-b 新增：float:left

p-d 新增：float:left

p-d 新增：float:leftCSS float 浮动属性

2 變化後不夠長

　　　　

CSS float 浮动属性 　　② 瀏覽器的寬度"夠長"時

　　　　

2.3 結論: 下一個緊鄰元素分類(不含float)結論塊級元素(a)塊級元素(b)b會填充a遺留下來的空間，a會和b發生重疊，a的圖層在上面。 內聯元素(b)b會緊跟在a的後面。並根據自身內聯元素的特點，是否換行。 內聯元素(a)塊級元素(b)b不會跟隨a的移動。 內聯元素(b)b會緊跟在a的後面。並根據自身內聯元素的特點，是否換行。

 

3. float:right

說明：元素向右浮動。

3.1 程式碼變更

input2元素：新增float:right

p-b 新增：float:right

p-d 新增：float:right

3.2 變更後視圖

㟜的寬度🜀㟜3.2 變高後視圖🜀㟜的寬度

CSS float 浮动属性 　　② 瀏覽器的寬度"夠長"時

　　

CSS float 浮动属性 3.3 結論

緊鄰元素分類(不包含float)
結論塊級元素(a)塊級元素(b)b會填充a遺留下來的空間，若a會和b發生重疊(父容器寬度減少)，a的圖層在上面。 內聯元素(b)b會填滿a遺留下來的空間。 內聯元素(a)塊級元素(b)b不會跟隨a的移動。 內聯元素(b)b會填滿a遺留下來的空間。

 

4. 鄰近元素含有float屬性 

因內嵌元素的特性，最好別將內聯元素與區塊元素相鄰使用float屬性。

下面都以區塊級元素為例：

預設視圖：

下面都以區塊級元素為例：

CSS float 浮动属性 預設視圖：

4.1 float:left

　　　〜〜.　①瀏覽器的寬度"夠長"

　　　　

CSS float 浮动属性

　　　　②瀏覽器的寬度"不夠長"

　　〜　的浮動元素，left屬性最前面的元素，排在最左邊。

CSS float 浮动属性 　　　　Ⅱ 成為浮動元素後，在浮動層擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。

 

4.2 float:right

　　　　給這三個p都添加float:right

4.2.1 視圖

『　

　　　　②瀏覽器的寬度"不夠長"

　　　　

 4.2.2 結論

CSS float 浮动属性 　　　　Ⅰ 相鄰屬性的浮動元素，right屬性最前面的元素，排在最右面。

　　　　Ⅱ 成為浮動元素後，在浮動層擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。

 CSS float 浮动属性

4.3 height高度不等的塊級元素

把p-a的height值設為大於p-b，三個p都添加float:left後：

4.3.1 視圖

〜〕㟎〜〜〜〜〜〜〜〜〜〜、〜〜〜、〜〜〜〜〜、〜〜〜〜〜〜、〜"長"

　　　　

　　　　②瀏覽器寬度縮小時

　　　　㟎？　　

4.3.2 結論

　　　　Ⅰ height不相等的p浮動元素排序時，照擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。 CSS float 浮动属性

4.3.3 解瀏覽器寬度縮小變形

　　　　把添加float的屬性的p元素嵌入在一個p中，並給此p添加width和height屬性。瀏覽器寬度縮小時，也不會變形。

CSS float 浮动属性 　　　　可參考 CSS HTML元素佈局及Display屬性介紹

　　　　

CSS float 浮动属性  

中文CSS float 浮動更多！

　
相關標籤：
CSS float 浮动
來源：php.cn
上一篇：CSS 顏色體系詳解 下一篇：CSS 的優先機制
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
僅 CSS 方法可在單擊時動態修改圖片 src，無需使用 JavaScript 我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}
來自於 2024-04-06 19:25:49
0
1
505
顯示隱藏的側邊面板：選中 我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...
來自於 2024-04-06 15:49:33
0
1
319
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！