CSS Float(浮動)

#什麼是 CSS Float（浮動）？

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

Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

CSS float 浮動屬性

　　本篇主要介紹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屬性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <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>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1"  />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> <div id=a >div-a</div> <div id=b>div-b</div> <div id=c>div-c</div> <input type="text" value="input1" /> <input type="text" value="input2" /> <input type="text" value="input3 " /> <div id=d>div-d</div> <input type="text" value="input4 " /> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear