css Question posted in
Some basic documentation can be found here.

Css – Difference between clearfix and clear:both at the following element

I have floated some elements and to make the layout appear proper. I have two ways basically clear-fix and clear:both at the following element.

1)

.extra-float-container::after{
    content: "";
    clear: both;
    display: block;
}


footer {
    clear: both;
    background-color: #ff0;
    padding: 10px;
}

I can’t able understand why there are two ways to that. Is there any special use-cases for each of them so that other option doesn’t work?

Tags:

2

Answers


  1. 0

    clearfix is a add-on class with clear: both property to clear floating of an element.

    While clear: both itself a property to clear floating of both side of an element.

    Float was used when there were no flex or grid properties available.

    You can use flex or grid layout to achieve your design.

    Hope, this will help.

    Login or Signup to reply.
  2. 0

    These two techniques achieve similar outcomes, with subtle differences. Personally if a simple clear: both works for a particular layout, then it would be my first choice. But there may be layouts for which the clearfix hack works better, in which case I would use that.

    Here is a snippet which illustrates the differences.

    div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1, .img2 {
  float: right;
}

.next {
  color: green; 
}

hr, .clear {
  clear: both;
}

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

code {
  background: silver;
  padding: 2px 5px;
  border-radius: 5px;
}

hr {
  border: 0;
  padding-bottom: 1em;
  border-bottom: 3px dashed orange;
}
    <h2>Base case</h2>

<div>
  <img class="img1" src="https://picsum.photos/340" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<p class="next">Next paragraph</p>

<hr>

<h2 style="clear:right">Use of clear: both</h2>
<p>You can add <code>clear: both</code> to an element to make sure it starts beneath any floats. Here I have applied it to the next paragraph. This is a simple CSS style, which does the job if applied correctly.</p>

<div>
  <img class="img2" src="https://picsum.photos/340" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<p class="next clear">Next paragraph cleared</p>

<hr>

<h2>With clearfix hack</h2>
<p>The clearfix hack <a href="https://www.w3schools.com/howto/howto_css_clearfix.asp">as described here</a>, is used on the parent of the floated element. It uses <code>clear: both</code> as well, but adds a couple of extra styles to make the parent container grow to contain the float. If this is more suitable for your use case, then use it.</p>

<div class="clearfix">
  <img class="img2" src="https://picsum.photos/340" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<p class="next">Next paragraph</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search