HTML Style clear用法及代碼示例

HTML中的DOM樣式clear屬性用於設置或獲取特定元素相對於浮點數對象的位置。

用法

要獲得清晰的屬性：
```
object.style.clear
```

設置清除屬性：

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

屬性值：

值	描述
left	不允許元素左側的浮點數實體
right	不允許元素右側的浮點數實體
both	不允許在元素的左側或右側浮點數實體
none	允許在元素左側和元素右側浮點數實體。這是默認設置
initial	將屬性的值設置為其默認值。
inherit	繼承此屬性的值，即設置與父屬性相同的值

返回值：它返回一個字符串，該字符串表示元素相對於浮點數對象的位置。

示例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style clear Property 
    </title> 
    <style> 
        img { 
            float:left; 
        } 
    </style> 
</head> 
  
<body> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         width="150" height="150"> 
  
    <p id="P" style="color:green"> 
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE 
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE 
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE 
      GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE 
      GEEKSFORGEEKS PARAGRAPH HERE 
    </p> 
  
    <button type="button" onclick="myFunction()"> 
      Clear left side of text</button> 
  
    <script> 
        function myFunction() { 
            
            document.getElementById( 
              "P").style.clear = "left"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

點擊前：
點擊後：

示例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style clear Property 
    </title> 
    <style> 
        img { 
            float:right; 
        } 
    </style> 
</head> 
  
<body> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         width="150" height="150"> 
  
    <p id="P" style="color:green"> 
      GEEKSFORGEEKS PARAGRAPH HERE  
      GEEKSFORGEEKS PARAGRAPH HERE 
      GEEKSFORGEEKS PARAGRAPH HERE  
      GEEKSFORGEEKS PARAGRAPH HERE  
      GEEKSFORGEEKS PARAGRAPH HERE 
      GEEKSFORGEEKS PARAGRAPH HERE  
      GEEKSFORGEEKS PARAGRAPH HERE  
      GEEKSFORGEEKS PARAGRAPH HERE  
      GEEKSFORGEEKS PARAGRAPH HERE 
    </p> 
  
    <button type="button" onclick="myFunction()"> 
      Clear right side of text</button> 
  
    <script> 
        function myFunction() { 
            
            document.getElementById( 
              "P").style.clear = "right"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

點擊前：
點擊後：

示例3：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style clear Property 
    </title> 
    <style> 
        img { 
            float:right; 
        } 
          
        #i { 
            float:left; 
        } 
    </style> 
</head> 
  
<body> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         width="150" height="150"> 
    <img id="i" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" 
         width="150" height="150"> 
  
    <p id="P" style="color:green"> 
      GEEKSFORGEEKS PARAGRAPH HERE 
      GEEKSFORGEEKS PARAGRAPH HERE  
    </p> 
  
    <button type="button" onclick="myFunction()"> 
      Clear left and right side of text 
  </button> 
  
    <script> 
        function myFunction() { 
            
            document.getElementById( 
              "P").style.clear = "both"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

點擊前：
點擊後：

支持的瀏覽器：HTML | DOM樣式清除屬性如下所示：

穀歌瀏覽器
Edge
火狐瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自EnaMotwani大神的英文原創作品 HTML | DOM Style clear Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。