HTML - DOM樣式物件 clear 屬性

HTML DOM 樣式物件 **clear** 屬性用於設定或獲取特定元素相對於浮動物件的相對位置。

語法

設定 clear 屬性

object.style.clear= "none | left | right | both | initial | inherit";

獲取 clear 屬性

object.style.clear;

屬性值

值	描述
none	這是預設值，允許元素兩側都有浮動物件。
left	不允許元素左側有浮動物件。
right	不允許元素右側有浮動物件。
both	不允許元素任何一側（左側或右側）有浮動物件。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素相對於浮動物件的相對位置。

HTML DOM 樣式物件“clear”屬性示例

在這個例子中，我們有兩個分別為綠色和黃色的 div 元素分別浮動在左側和右側，我們實現了“left”、“right”、“both”和“none”屬性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object clear Property
    </title>
    <style>
        #first {
            background-color: #04af2f;
            height: 200px;
            width: 200px;
            float: left;
        }
        div {
            background-color: yellow;
            height: 200px;
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Left</button>
    <button onclick="funTwo()">Right</button>
    <button onclick="funThree()">Both</button>
    <button onclick="funFour()">None</button>
    <br><br>
    <div id="first"></div>
    <div></div>
    <p id="clear">
        This is a random text for example.
        Welcome to Tutorials Point
        Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Ducimus nostrum, recusandae,
        iusto voluptate, optio at tempore quaerat quis
        aut exercitationem labore mollitia. Culpa quidem
        dicta iste commodi quaerat fuga ullam!
    </p>
    <script>
        function fun() {
            document.getElementById("clear")
                .style.clear = "left";
        }
        function funTwo() {
            document.getElementById("clear")
                .style.clear = "right";
        }
        function funThree() {
            document.getElementById("clear")
                .style.clear = "both";
        }
        function funFour() {
            document.getElementById("clear")
                .style.clear = "None";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
clear	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

列印頁面