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

打印页面