/CSS/Css clearfix for floats with display table and clear both

Css clearfix for floats with display table and clear both

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 vote350 views1 answer
Css display original image in smalle width
CSS
1 vote319 views1 answer
Css animate border bottom on hover
CSS
8 votes383 views3 answers
Css max one line three dots
CSS
1 vote329 views1 answer
Will change css
CSS
2 votes354 views1 answer
Css preprocessor
CSS
0 vote336 views1 answer
How to resize after image in css
CSS
7 votes343 views3 answers
Z-index max value
CSS
2 votes318 views1 answer
Circle div
CSS
27 votes339 views6 answers
Import font css
CSS
0 vote333 views4 answers
How to pass html number to css
CSS