$2.56

What is a clearfix?

Ask a question+
0

Recently I was looking through some website’s code, and saw that every<div> had a classclearfix.

After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix?

Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix?

add comment

3 Answers

1

Elements after a floating element will wrap around it. Clearfix solves the problem.
For example, if you have a block (for example, div), and there are floating elements in the block (for example, there are p tags in the div whose style is float: left or float: right), then the block loses its height, and the design is destroyed, and in such cases, you can use clearfix with styles

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
Ruben 90
add comment
0

The clearfix allows a container to wrap its floated children. If you want support for older browsers, it’s best to use this clearfix :

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

In SCSS, you could use the following code

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}
Ani Manukyan 180
add comment
0

If you don’t need to support IE9 or lower, you can use flexbox freely, and don’t need to use floated layouts.
It’s worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.

display: inline-block - Better
Flexbox - Best (but limited browser support)
Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android’s default browser 4.4.

For a detailed browser list see: https://www.w3docs.com/learn-css/the-ultimate-guide-to-flexbox.html

(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)

Clearfix Image

A clearfix is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements

A clearfix is performed as follows:

.clearfix:after {
content: “ “; / Older browser do not support empty content /
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Or, if you don’t require IE<8 support, the following is fine too:

.clearfix:after {
content: “”;
display: table;
clear: both;
}
Normally you would need to do something as follows:

<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
With clearfix, you only need the following:

<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Read about it in this article - by Chris Coyer @ CSS-Tricks

Azniv Saroyan 100
add comment

Your Answer

how it works
asked
viewed23