Skip to content

CSS code snippet – How to clear floats?

This is the code 

.float-wrapper::after {
  content: "";
  clear: both;
  display: block;

.float-wrapper -> is some parent element that wraps the floating items

<div class='float-wrapper'>
     <div class='floating-item'> </div>
     <div class='floating-item'> </div> 

::after  adds  an element after the .float-wrapper, that 
has no content and clears floats from the both sides, making sure, 
other sections are not affected by floats

See also  How to get create table query preview in PHPmyadmin?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.