DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 12.3 清除浮動clear
12.3 清除浮動clear
編輯:CSS基礎知識     

一、清除浮動簡介

在CSS中,清除浮動都是在設置左浮動或者右浮動之後的元素內設置。

語法:

clear:取值;

說明:

clear屬性取值如下:

表1 clear屬性值 clear屬性值 說明 left 清除左浮動 right 清除右浮動 both 左右浮動一起清除

使用clear屬性清除浮動,我們比較少使用“clear:left;”或者“clear:right;”來判斷是清除左浮動,還是清除右浮動。我們往往直截了當地使用“clear:both;”來把所有浮動清除,還省事。也就是說,我們在這一節只要學會“clear:both;”這一個屬性就足夠啦。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS清除浮動</title>
    <style type="text/css">
        /*定義父元素樣式*/
        #father
        {
            width:400px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定義子元素樣式*/
        #father div
        {
            padding:10px;
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
        /*定義文本樣式*/
        #father p
        {
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
        #son1
        {
            /*這裡設置son1的浮動方式*/
            float:left;
        }
        #son2
        {
            /*這裡設置son2的浮動方式*/
            float:left;
        }
        #son3
        {
            /*這裡設置son3的浮動方式*/
            float:right;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
        <p>這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,這裡是浮動框外圍的文字,</p>
    </div>
</body>
</html>

在浏覽器預覽效果如下:

我們添加如下CSS樣式:

p{clear:both;}

這個時候在浏覽器預覽效果如下:

分析:

由於p元素清除了浮動,所以p元素的前一個元素產生的浮動就不會對後續元素產生影響,因此p元素的文本不會環繞在浮動元素的周圍。

除了使用clear屬性來清除浮動,還可以采用“overflow:hidden;”來清除浮動,在這裡大家只需要了解一下即可。在“CSS進階教程”,我們會詳細講解清除浮動都有哪些方法。

對於CSS浮動、CSS定位這些,你必須要通過實踐才能真正掌握( 學習網會不斷改善,給你提供實踐題目)。實踐再回來看定義,就會很清楚了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved