float與clear用法

摘要:float與clear用法

 一個頁面要使用文繞圖方式來呈現可使用float來呈現,

通常float屬性會用於行內元素,並使塊級元素會與之配合。

float屬性也可以用於塊級元素,只是 float 塊級元素與 float 行內元素的浮動排列之高度基準點不一樣,

可使用 margin-top :0px; 調整,讓兩者的基準點都一致。

例如:

圖片靠左文繞圖則對圖片使用float:left

圖片靠右文繞圖則對圖片使用float:right

但是呢,當使用圖片靠左文繞圖時,

一段文字或圖片想要跳下一行而不想要有文繞圖效果的文字記得使用clear:left來取消效果,

否則該對文字將會以具有文繞圖效果之圖片為目標圍繞該圖片。

上圖的HTML元素順序為img、p、p、img,

第一個img有使用float:left所以後面三個元素都會嘗試圍繞第一個圖片

 

這時我對第二段落使用clear:left清除了靠左文繞圖效果,效果如下圖

<!DOCTYPE html>
<html>
<head>
    <style>
        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .bd-red {
            border: 1px solid red;
        }

        .bd-blue {
            border: 1px solid blue;
        }

        .cr {
            clear: right;
        }

        .cl {
            clear: left;
        }

        .cb {
            clear: both;
        }
    </style>
</head>
<body>
    <img class="bd-red fl" src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84">
    <p class="bd-blue">This is some text. This is some text.</p>
    <p class="bd-blue cl">This is some text. This is some text.</p>
    <img class="bd-red" src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84">
    <p class="bd-blue">This is some text. This is some text.</p>
</body>
</html>

 

再來看另一個例子,原本無設定樣式如下

<!DOCTYPE html>
<html>
<head>
    <style>
        .i1 {
            border: 1px solid red;
        }
        .i2 {
            border: 1px solid red;
        }
        .p1 {
            border: 1px solid blue;
        }
        .p2 {
            border: 1px solid blue;
        }
        .p3 {
            border: 1px solid blue;
        }
        .p4 {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <p class="p1">This is some text. This is some text.</p>
    <img class="i1" src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84">
    <p class="p2">This is some text. This is some text.</p>
    <img class="i2" src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84">
    <p class="p3">This is some text. This is some text.</p>
    <p class="p4">This is some text. This is some text.</p>
</body>
</html>

 

接下來我對兩圖片一個設定靠左文繞圖、一個設定靠右文繞圖效果如下

<!DOCTYPE html>
<html>
<head>
    <style>
        .i1 {
            border: 1px solid red;
            float: left;
        }
        .i2 {
            border: 1px solid red;
            float: right;
        }
        .p1 {
            border: 1px solid blue;
        }
        .p2 {
            border: 1px solid blue;
        }
        .p3 {
            border: 1px solid blue;
        }
        .p4 {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <p class="p1">This is some text. This is some text.</p>
    <img class="i1" src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84">
    <p class="p2">This is some text. This is some text.</p>
    <img class="i2" src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84">
    <p class="p3">This is some text. This is some text.</p>
    <p class="p4">This is some text. This is some text.</p>
</body>
</html>

由上圖可知,沒有clear的四個段落文字將被瓜分至靠左文繞圖與靠右文繞圖。

如果我對第四個段落文字使用clear:left呢?於相同視窗大小則沒有反應,

因為文繞圖靠左的部分已被前三段段落文字填滿了,但clear:left效果還是有的(嘗試著調整視窗大小)

那我改使用clear:right呢?則該段落文字因為沒有了靠右文繞圖效果而變為原本的block樣式,如下圖

但是請注意,雖然p元素使用了clear:right,可是他還是會受到第一張圖片float:left的影響,

所以最保險的做法就是clear:both,這樣才能夠安心的實現block樣式。

 

參考資料:

Positioning the float: the 'float' property

Controlling flow next to floats: the 'clear' property

【笨問題】Inline-Block元素多出來的間隙

TIPS-清除CSS float設定

善用 :before and :after

CSS Float

超連結樣式 圖與字的調整 字在底圖的上面

column

Clearfix