Semantic-UI Divider Variations Clearing Variant

Last Updated : 06 Feb, 2022

Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic-UI Divider is used to create the divider between two elements, this offers us 3 types of the divider with 5 variations Inverted, Fitted, Section, Clearing, and Hidden. In this article, we will know about the Clearing Variant

Semantic-UI Divider Variations Clearing Variant Class:

clearing: This class is used to clear the contents above it.

Syntax:

<div class="ui segment">
  <h2 class="ui right floated header">.....</h2>
  <div class="ui clearing divider"></div>
  ....
</div>

Below example illustrate the Semantic-UI Divider Variations Clearing Variant:

Example 1: The following example demonstrates the clearing divider variation type with the left floated header.

HTML

<!DOCTYPE html> 
<html> 
    
<head>    
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
    
<body> 
    <h1>GeeksforGeeks</h1> 
    <strong> 
        Semantic-UI Divider Variations Clearing Variant 
    </strong> 
    <h3 class="ui right floated header"> 
        Semantic UI 
    </h3> 
    <div> 
      <div class="ui clearing divider"></div> 
       <p> 
           Semantic UI is a free open-source  
           front-end development framework that 
           is equipped with pre-built semantic  
           components that helps create responsive 
           layouts using user-friendly HTML. In  
           terms of user-friendliness,    Semantic UI 
           is better than Bootstrap. 
       </p> 
  
       <h3 class="ui left floated header">  
          Semantic UI - Clearing type Divider  
       </h3> 
       <div class="ui clearing divider"></div> 
       <p> 
         The clearing variation divider clears 
         the contents specified above the divider. 
         This type of divider is used when more space 
         is required between any two sections.  
       </p> 
  
     </div> 
</body>   
</html>

Output:

Example 2: In the below code we can see a slightly different example, we can see a clearing divider variation using a vertical divider, which divides two sections into sectioned vertical sections.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" /> 
</head>   
<body> 
    <h1>GeeksforGeeks</h1> 
    <strong>Semantic-UI Divider Variations Clearing Variant</strong> 
    <div class="ui segment"> 
        <div class="ui two column very relaxed grid"> 
            <div class="column"> 
                <h3 class="ui header"> Semantic UI </h3> 
                <p> 
                    Semantic UI is a free open-source front-end 
                    development framework that is equipped with 
                    pre-built semantic components that helps create 
                    responsive layouts using user-friendly HTML.  
                    In terms of user-friendliness, Semantic UI  
                    is better than Bootstrap. 
                </p> 
  
            </div>   
            <div class = "column"> 
                <h3 class="ui header"> 
                    Semantic UI - Clearing divider variation  
                </h3> 
                <p> 
                    The Clearing variation divider clears the  
                    contents specified above the divider.  
                    This type of divider is used when more  
                    space is required between any two sections. 
                </p> 
      
            </div> 
        </div> 
        <div class="ui clearing vertical divider">AND</div> 
    </div> 
</body>   
</html>