Semantic-UI Segment Clearing Variation

Last Updated : 16 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

A Segment is used to group similar content which makes the user experience better and helps users to navigate through your content efficiently. A Segment Clearing Variation is used to clear floated content inside the parent segment.

Semantic-UI Segment Clearing Variation classes:

clearing: This class is used to clear floated content.

Syntax:
<div class="ui clearing segment">
  <div class="ui right floated button">
   .........
  </div>
</div>

Example 1: Below code demonstrates the use of Segment Clearing Variation using right floated classes.

HTML

<html> 
    
<head> 
  <title>Semantic-UI Segment Clearing Variation </title> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
        rel="stylesheet"/> 
</head> 
  
<body style="margin-inline: 600px;"> 
  <center> 
    <h1 class="ui header green"> 
      Geeksforgeeks 
    </h1> 
  
    <h3> 
       Semantic-UI Segment Clearing Variation  
    </h3> 
  </center> 
        
  <div class="ui clearing segment"> 
    <div class="ui right floated button green"> 
      Right Floated 
    </div> 
  </div> 
</body> 
  
</html>

Output:

Semantic-UI Segment Clearing Variation

Example 2: Below is another code that demonstrates the use of Segment Clearing Variation using left floated classes.

HTML

<html> 
    
<head> 
  <title>Semantic-UI Segment Clearing Variation </title> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
        rel="stylesheet"/> 
</head> 
  
<body style="margin-inline: 600px;"> 
  <center> 
    <h1 class="ui header green"> 
      Geeksforgeeks 
    </h1> 
  
    <h3> 
       Semantic-UI Segment Clearing Variation  
    </h3> 
  </center> 
        
  <div class="ui clearing segment"> 
    <div class="ui left floated button green"> 
      Left Floated 
    </div> 
  </div> 
</body> 
  
</html>