Semantic-UI Divider Variations: Clearing Variant

Semantic-UI is a popular front-end development framework that provides ready-made CSS and JS components for building sleek and responsive user interfaces. One of its most commonly used components is the divider, which is used to separate content sections in a page or form.

The clearing variation of the Semantic-UI divider is a special type of divider that comes with added CSS styling to clear any floated elements that come before it. This is particularly useful when you have a page or a form with multiple floated elements such as buttons, images or text, and you want to ensure that the next content section starts after all the floated elements have been cleared.

How to Use the Clearing Variation

To use the clearing variation of the Semantic-UI divider, you need to add the clearing class to the divider element. Here's an example using HTML:

<div class="ui clearing divider"></div>

In addition to the clearing class, you can add other classes to the divider element to customize its styling and appearance. Here are a few examples:

<div class="ui clearing horizontal divider"></div>
<div class="ui clearing fitted divider"></div>

Example

Here's an example of how to use the clearing variation of the Semantic-UI divider in a simple contact form:

<div class="ui form">
  <div class="fields">
    <div class="field">
      <label>Name</label>
      <input type="text" placeholder="Name">
    </div>

    <div class="field">
      <label>Email</label>
      <input type="email" placeholder="Email">
    </div>

    <div class="field">
      <label>Message</label>
      <textarea></textarea>
    </div>
  </div>

  <div class="ui clearing divider"></div>

  <button class="ui primary button">Send Message</button>
</div>

In this example, we have three fields for entering the user's name, email, and message, followed by a clearing divider, and then a button for submitting the form. The clearing divider ensures that the button is not affected by any floated elements from the fields section.

Conclusion

The clearing variation of the Semantic-UI divider is a powerful tool for maintaining layout consistency in your web projects. By using the clearing class, you can ensure that any floated elements are cleared before the next content section starts. Try it out in your own projects and see how it can improve your design and layout.