/CSS/What does clearfix for floats do in css

What does clearfix for floats do in css

/* A clearfix is a way for an element 
to clear its child elements automatically without any additional markup.
The clearfix property is generally used in float layouts where elements 
are floated to be stacked horizontally. ... The clearfix property allows
a container to wrap its floated children.
*/

.clearfix {
  overflow: auto;
}

Source: educative.io

Css clearfix for floats with display table and clear both

.group:after {
  content: "";
  display: table;
  clear: both;
}

<div class="group">
  <div class="is-floated"></div>
  <div class="is-floated"></div>
  <div class="is-floated"></div>
</div>

Source: css-tricks.com

Similar codes

0 vote138 views1 answer
How to make header on top
CSS
24 votes187 views5 answers
Placeholder css
CSS
1 vote171 views1 answer
Flexbox align or justify one single item
CSS
0 vote182 views1 answer
Statamic regex replace
CSS
36 votes213 views6 answers
How to insert gradient in css
CSS
1 vote179 views1 answer
Html minimum width
CSS
19 votes145 views2 answers
Add font to react
CSS
0 vote197 views1 answer
How to make fixed position responsive
CSS
1 vote196 views1 answer
Screen rotation in css
CSS
0 vote183 views1 answer
Countload on pageloading in html css
CSS