css浮動(dòng)屬性float的用法詳解

發(fā)布時(shí)間：2020-05-11 15:51:14 來(lái)源：億速云閱讀：272 作者：Leah 欄目：web開發(fā)

今天小編就為大家?guī)?lái)一篇css浮動(dòng)屬性float的用法詳解的文章。小編覺得挺不錯(cuò)的，為此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

我們?cè)谶M(jìn)行頁(yè)面布局時(shí)，經(jīng)常會(huì)用到css浮動(dòng)屬性也就是 float屬性，那么對(duì)于新手來(lái)說(shuō)，這一塊的知識(shí)點(diǎn)是必須要掌握了解的。否則完整的網(wǎng)頁(yè)是很難完成的。那么本篇文章就給大家詳細(xì)介紹css float屬性的具體使用方法。希望對(duì)大家有所幫助。

下面我們通過(guò)具體的代碼示例，給大家詳細(xì)介紹

一、css 浮動(dòng)屬性-float right屬性代碼示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css float right屬性使用示例</title>
    <style>
    .demo{
    width: 500px;height: 400px;
    background-color: #b2ecef;
}
   img{
       width:100px;
       height: 100px;
       float: right;
   }
     </style>
</head>
<body>
<div class="demo">
    <img src="/test/img/1.png">
    <img src="/test/img/2.png">
</div>
</body>
</html>

上述代碼中，我在div中設(shè)置了兩張img圖片，在沒有對(duì)圖片添加float right屬性樣式下，效果是如下圖1：

css浮動(dòng)屬性float的用法詳解

而后我們給img圖片添加float right屬性后，效果又如下圖2：

css浮動(dòng)屬性float的用法詳解

相信大家從圖1和圖2的比較中了發(fā)現(xiàn)一些變化。在圖1中沒有設(shè)置css浮動(dòng)屬性時(shí)，兩個(gè)img圖片是在同一行中從左往右排列顯示，并且兩張圖片中間有空隙。而在圖2中我們添加了浮動(dòng)屬性float right后，兩個(gè)img元素開始從右向左浮動(dòng)排列顯示，并且沒有間隙。此時(shí)如果我們需要有間隙，那么就要用到padding屬性。所以我們可以得知，css浮動(dòng)屬性float可以通過(guò)設(shè)置right值來(lái)控制元素向右浮動(dòng)。

二、css 浮動(dòng)屬性-float left屬性代碼示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css float left屬性使用示例</title>
    <style>
        .demo{
            width: 100px;height: 100px;
            background-color: #ccccff;
        }
        .demo1{
            float: left;
            width: 100px;height: 100px;
            background-color: #b2ecef;
        }
     </style>
</head>
<body>
<div class="demo">
</div>
<div class="demo1">
</div>
</body>
</html>

以上代碼中，我們?cè)O(shè)置了兩個(gè)div塊，分別用不同顏色顯示，如果沒有設(shè)置float屬性時(shí)，效果是如下圖3：

css浮動(dòng)屬性float的用法詳解

那么我們?cè)O(shè)置了float left屬性后，在瀏覽器訪問后，效果又如下圖4：

css浮動(dòng)屬性float的用法詳解

通過(guò)圖3和圖4的對(duì)比，我們可以明顯發(fā)現(xiàn)demo1元素向左浮動(dòng)了。同樣，如果我們想要兩個(gè)元素之間有間隙，可以通過(guò)padding邊距屬性來(lái)實(shí)現(xiàn)。

css float屬性是可以控制任何元素向左向右浮動(dòng)的。css float屬性不僅可以用于控制圖片浮動(dòng)，也可以控制文本浮動(dòng)。

看完上訴內(nèi)容，你們掌握css浮動(dòng)屬性float的用法了嗎？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

css浮動(dòng)屬性float的用法詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽