Semantic-UI Segment Clearing Variation Last Updated : 16 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Semantic-UI Segment Clearing Variation Reference: https://semantic-ui.com/elements/segment.html#clearing Comment More infoAdvertise with us Next Article Semantic-UI Segment Colored Variation Y yourcontactformsubmitted Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Segment Circular Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style the web app instead of using CS 2 min read Semantic-UI Segment Basic Variation Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Segment is a segment is a container used to place contents of the 2 min read Semantic-UI Segment Colored Variation 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 boots 2 min read Semantic-UI Segment Emphasis Variation Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Segment is a container used to place contents of the same type or 2 min read Semantic-UI Segment Variations Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Segment is a segment is a container used to place contents of the 6 min read Semantic-UI Segment Compact Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style the web app instead of using CS 2 min read Like