CSS中flaot的屬性用法,符合所有瀏覽器的排版

float的介紹

float是較早期被網頁使用來排版的屬性,所以瀏覽器的支援度也達到非常高,可以使你的區塊產生浮動效果,藉此可以達到水平左右移動效果,以及常見的文字繞圖作用

right、left、none (預設值)

float中的right、left、none這三個值是最常被使用,可以快速達到排版效果

  • righ:向右
  • left:向左
  • none:預設值,沒有float效果

呈現方式

  • 設置六個box
  • 邊框1px紅色
  • 粉紅背景
  • 高跟寬100px
  • 設定1.2是none
  • 設定3.4是left
  • 設定5.6是right

HTML

    <div class=”box1″>我是1 </div>

    <div class=”box2″>我是2 </div>

    <div class=”box3″>我是3 </div>

    <div class=”box4″>我是4 </div>

    <div class=”box5″>我是5 </div>

    <div class=”box6″>我是6 </div>

CSS

<         div {

            border: 1px solid red;

            background: pink;

            width: 100px;

            height: 100px;

        }

        .box1 {

            float: none;

        }

        .box2 {

            float: none;

        }

        .box3 {

            float: left;

        }

        .box4 {

            float: left;

        }

        .box5 {

            float: right;

        }

        .box6 {

            float: right;

        }

程式執行結果

可以看到設定為none是不會動作的,而預設就是這樣,設定left會從第一個被設定float的3那行開始向左排版,而被設定right的也從右邊排過去,可以看到是先排5在排6

我是1
我是2
我是3
我是4
我是5
我是6

文字繞圖效果

由於float可以做到浮動效果,所以佔滿整行的版面,可以讓文字出現在他的旁邊,而文字量超過設置的高度,則繼續往下寫滿

呈現方式

  • 設置四個box
  • 背景兩個邊框1px藍色,淺藍背景
  • 裡面兩個邊框1px紅色,粉紅背景
  • 背景高跟寬300px
  • 裡面高跟寬100px
  • 第一個組合設置為none
  • 第二個組合設置為left

HTML

    <div class=”back”>

        <div class=”box1″>我是none</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse

        molestias asperiores veniam

        temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.

    </div>

    <div class=”back”>

        <div class=”box3″>我是right</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse

        molestias asperiores veniam

        temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.

    </div>

CSS

[class^=”box”] {

            border: 1px solid red;

            background: pink;

            width: 100px;

            height: 100px;

        }

.box1 {

            float:none;

        }

        .box3 {

            float: left;

        }

        .back {

            width: 300px;

            height: 300px;

            border: 1px solid blue;

            background: rgb(81, 165, 221);

            margin-top: 10px;

        }

程式執行結果

可以看到設置組合一,會因為裡面的盒子,文字只能避開往下排,但設置float之後,文字會繞著盒子走,直到超出高度才會繼續往下排

我是none
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse molestias asperiores veniam temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.
我是right
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse molestias asperiores veniam temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.

與display:inline-block的差別

float可以直接往右排,也就是用right,而inline-block只能往左排,且inline-block做不到文字繞圖效果

※這裡使用到display:inline-block觀念,可以參考此文章

CSS中display的屬性差異

呈現方式

  • 設置四個box
  • 背景兩個邊框1px藍色,淺藍背景
  • 裡面兩個邊框1px紅色,粉紅背景
  • 背景高跟寬300px
  • 裡面高跟寬100px
  • 第一個組合設置為 display:inline-block
  • 第二個組合設置為left

HTML

    <div class=”back”>

        <div class=”box1″>我是none</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse

        molestias asperiores veniam

        temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.

    </div>

    <div class=”back”>

        <div class=”box3″>我是right</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse

        molestias asperiores veniam

        temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.

    </div>

CSS

  [class^=”box”] {

            border: 1px solid red;

            background: pink;

            width: 100px;

            height: 100px;

        }

.box1 {

            display: inline-block;

        }

        .box3 {

            float: left;

        }

        .back {

            width: 300px;

            height: 300px;

            border: 1px solid blue;

            background: rgb(81, 165, 221);

            margin-top: 10px;

        }

程式執行結果

可以看到跟剛剛範例一樣,唯一不同的第一組合加入了display:inline-block所以他只能讓一行文字上來跟他並排,超過的部分必須往下排

我是none
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse molestias asperiores veniam temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.
我是right
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse molestias asperiores veniam temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.

刪除float的效果

float有個很麻煩的問題在於,設置漂浮後,也會影響後面加入的區塊,可以想像我們平時移動為上下左右,有個東西飄在上面,那你就只能往他下面擺

舉例:設置過float的區塊,像是天上的雲可以在上面左右移動,而人就像是沒設置float的,只能在地面左右移動

要刪除則可以使用clear fix來進行

呈現方式

  • 設置四個box
  • 下面兩個邊框1px藍色,淺藍背景
  • 上面兩個邊框1px紅色,粉紅背景
  • 下面高跟寬300px
  • 上面高跟寬100px
  • 第一個組合設置為沒有加入 clear fix
  • 第二個組合設置為有加入 clear fix

HTML

    <div class=”box7″>我沒clear fix</div>

    <div class=”back1″>我是1</div>

    <div class=”box8″>我用clear fix</div>

    <div class=”clear-fix”></div>

    <div class=”back2″></div>

CSS

 [class^=”box”] {

            border: 1px solid red;

            background: pink;

            width: 100px;

            height: 100px;

        }

[class^=back] {

            width: 300px;

            height: 300px;

            border: 1px solid blue;

            background: rgb(81, 165, 221);

            margin-top: 10px;

        }

        .clear-fix {

            content: “”;

            display: table;

            clear: both;

        }

        .box7 {

            float: left;

            margin-top: 10px;

程式執行結果

可以看到沒設置clear fix的狀況下,下一個區塊直接往下面擺,造成排版混亂,加入clear fix之後,則可以使下一個區塊的float效果消失,變回正常排版

我沒clear fix
我是1
我用clear fix

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *