CSS Float(浮動)

float是什麼？

float即為浮動，在CSS中的作用是使元素脫離正常的文檔流並使其移動到其父元素的「最左邊」或「最右邊」。以下解釋下這個定義中的幾個名詞的概念：

文檔流：在html中文檔流即是元素從上到下排列的順序。

脫離文件流：元素從正常的排列順序被抽離。

最左邊/最右邊：上述的移動到父元素最左和最右是指元素往左或往右移動直到碰到另一個浮動元素或父元素內容區的邊界（不包括padding ）。

float屬性：

#　① left ：元素向左浮動。

　② right ：元素向右浮動。

　③ none ：預設值。

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

實例：左浮動

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>float属性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
            float:left;
        }
        #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>
<div id="d">div-d</div>
</body>
</html>

實例：右邊浮動

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>float属性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
                  float:right;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
                  float:right;
         }
    </style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>

彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>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;
         }
         div
              {
             float:left;
              }
    </style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>

清除浮動- 使用clear

元素浮動之後，周圍的元素會重新排列，為了避免這種情況，使用clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>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; } div { float:right; } </style> </head> <body> <div id="a">div-a</div> <div id="b">div-b</div> <div id="c">div-c</div> <div id="d">div-d</div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear