float與clear用法

Posted on 2015-04-21 Edited on 2023-11-24 In CSS Views: Disqus:

一個頁面要使用文繞圖方式來呈現可使用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>