HTML5中塊級元素float浮動總結

本文轉載自查看原文 2020-09-07 17:31 1496 html、css

1.float屬性

在CSS中，任何元素都可以浮動，無論是塊級元素還是行內元素，設置浮動后可以設置寬高（width,height）。

值	描述
left	元素向左浮動。
right	元素向右浮動。
none	默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

HTML5中的塊級元素默認要獨占一行，無論當前塊元素的寬度是多少。

2.簡單示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
          
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
           
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }

        
    </style>
</head>

<body>
    <div id="container">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
      
    </div>
    <div id="block3">block3</div>
</body>

</html>

效果圖

（1）container塊沒有設置高度

（2）block1塊和block2放置於container塊中，block3塊置於container塊之外。

2.1設置第一個塊block1浮動

 #block1
        {
            border:1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮動到左邊 */
            float: left;
        }

效果圖：

block1塊脫離文檔流浮動到父容器container的左上角，block2塊和block3塊默認向上移動到原來block1位置，顯示出來的效果就是block1蓋住了block2。大概是下圖這個意思吧。

2.2設置block1浮動到左邊，block2浮動到右邊

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮動到左邊 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮動到右邊 */
            float: right;
        }

效果圖

block1塊和block2塊都浮動起來了，兩個塊的高度都比block3高，所以block3頂到文檔的最上面，被block1塊和block2塊蓋住。

2.3清除浮動(clear)

clear 屬性規定元素的哪一側不允許其他浮動元素。

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	默認值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

clear清除浮動的原理（轉自：https://blog.csdn.net/weixin_41796631/article/details/89425006）

（1）設置了 clear 的元素只能通過調整自身來使自己不要和浮動元素排列在一起。

（2）比如說，如果一個元素同時設置了 float:left 和 clear:left，希望左邊不要有浮動元素，那么這個元素就要調整自己，排到下一行去。因為設置了 float: left，這個元素會往左邊靠攏，所以這個元素會跑到下一行，同時往左浮動。

（3）如果設置了clear: right，也無法清除右邊的元素。因為元素只能調整自身，不能移動別的元素。所以右邊即使有浮動元素，也無法清除。

w3.org官方的解釋是：「元素盒子的邊不能和前面的浮動元素相鄰」。我理解這句話其實就是調到前面元素的下一行，讓左右兩邊不與前面的元素相鄰。

2.4清除浮動的4種方法

（1）設置block3塊的clear屬性

  #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
            /* 清除左邊浮動 */
            clear:left;
        }

效果圖：

  #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
            /* 清除右邊浮動 */
            clear:right;
        }

效果圖：

（2）在block2塊后面添加一個空div，這個空 div 的樣式添加 clear：both。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮動到左邊 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮動到右邊 */
            float: right;
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }
        
        .clearfix{
            clear: both;
        }
        
    </style>
</head>

<body>
    <div id="container">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
        <div class="clearfix"></div>
    </div>
    
    <div id="block3">block3</div>
</body>

</html>

效果圖：

樣式名為clearfix的塊寫在了container塊里面，當清除浮動時，父元素container的高度被撐起來了，其兄弟元素block3的渲染也不再受到浮動的影響。因為此時clearfix塊還在文檔流內，所以父元素只能自動增加高度，其背景顏色就顯示出來了。

如果將clearfix的塊寫在了container塊外面，則父元素container的高度不能被撐起來，如下圖所示：

（3）為父元素添加overflow屬性

overflow屬性

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

 #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
            /* 父元素加上overflow屬性 */
            overflow: auto;
         }

效果如下圖，此時已經默認清除了浮動。

（以下內容轉自：https://blog.csdn.net/h_qingyi/article/details/81269667）

（4）使用 after 偽元素清除浮動（推薦使用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮動到左邊 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮動到右邊 */
            float: right;
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }
        
        .clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
       .clearfix{
        *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
       }

        
    </style>
</head>

<body>
    <div id="container" class="clearfix">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
    </div>

    <div id="block3">block3</div>
</body>

</html>

View Code

起作用的代碼如下：

 .clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
       .clearfix{
        *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
       }

效果圖：

（5）使用before和after雙偽元素清除浮動（推薦使用）

 .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

效果與上面相同。

（6）給浮動元素父級設置高度

（7）設置父元素同時浮動

（8）父元素設置成inline-block

（9）br 標簽清除浮動

參考文章：

https://www.w3school.com.cn/cssref/pr_class_float.asp

https://blog.csdn.net/nanjinzhu/article/details/82716522

https://blog.csdn.net/weixin_34062469/article/details/91721757

https://blog.csdn.net/linysuccess/article/details/53432568

https://blog.csdn.net/qq_42039588/article/details/100982293

https://blog.csdn.net/sunny1996/article/details/68959176

https://blog.csdn.net/weixin_41796631/article/details/89425006

https://blog.csdn.net/weixin_43990215/article/details/95166061?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242

https://blog.csdn.net/weixin_34072857/article/details/91372246?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

https://www.cnblogs.com/nxl0908/p/7245460.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5的標簽中，哪些是行內元素，哪些是塊級元素。關於HTML（含HTML5）的塊級元素和行級（內聯）元素總結 HTML中塊級元素和行內元素的總結和區分。 HTML中的塊級元素有哪些？ HTML塊級元素 HTML5中的行級標簽和塊級標簽 html中的行內元素和塊級元素有哪些。 html中內聯元素和塊級元素的區別 HTML中塊級元素如何轉為行內元素 html中的行內元素和塊級元素小結