HTML 懸浮float介紹

時間 2020-05-21

標籤 html 懸浮 float 介紹欄目 HTML 简体版

原文原文鏈接

關於float的一些用法

左懸浮: float:left;
右懸浮:float:right;css

float用法

float的用途比較廣, 這裏簡單的介紹下集中常有的用法:html

在接觸到浮動前,我會去設置一些inline-block, block的屬性配合着div的鑲嵌去完成頁面的排版. 然後接觸到了浮動這一屬性, 直接讓元素漂浮起來簡易了不少,懸浮中不區分塊級元素(block),行內元素(inline),或者是行內塊元素(inline-block). float也會隨着父元素width大小的改變而自動排版,eg.直接調整可視窗口,會將元素擠到下一行.
此外, 就剛瞭解的SEO優化而言, 因爲瀏覽器的解析是從上而下的. 所以不少時候重要的內容寫在前面,把一些不重要的或者是廣告什麼的寫在後面.可是又想讓用戶注意到廣告,所以,不少時候把主內容居中排列, 廣告這些的左右懸浮, 相信常常瀏覽網頁的朋友的也注意到了這點

接下來來說講懸浮的一些書寫和效果吧

~~若是子元素懸浮了,會形成父元素的高度塌陷.這塊涉及到了清除懸浮,下一章會說起清除懸浮的講解~~
那麼言歸正傳,瀏覽器

第一個現象 float=inline-block

懸浮會是4個方塊變成行內塊模式的樣式呈現:以下圖所示優化

<style>
        div{
            width:200px;
            height:200px;
            background-color:  pink;
            border:1px solid black;
            float:left;
        }
    </style>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

第二現象:

以下圖所示, 因爲第一個懸浮起來了,所以第二個塊元素會呈如今第一個下面.
可是後面一個元素懸浮起來,不會越過到前面一個元素上面,如第四個塊元素懸浮,可是第三個沒有懸浮.第四季塊元素保持在原來位置上.spa

<style>
        .first-one{
            float:left;
            background-color:green;
        }
        .second-one{
            background-color:purple;
        } 
        .third-one{
           
            background-color:blue;
        } 
        .fourth-one{
            float:left;
            background-color:grey;
        } 
        div{
            width:200px;
            height:200px;
            background-color:  pink;
            border:1px solid black;
            font-size:30px;
        }
    </style>

<body>
    <div class= "first-one"></div>
    <div class= "second-one"></div>
    <div class= "third-one"></div>
    <div class="fourth-one"></div>
</body>