What is a clearfix?
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://caniuse.com/flexbox.
(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)
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
What does the clearfix class do in css?
How floats work
When floating elements exist on the page, non-floating elements wrap around the floating elements, similar to how text goes around a picture in a newspaper. From a document perspective (the original purpose of HTML), this is how floats work.
float
vs display:inline
Before the invention of display:inline-block
, websites use float
to set elements beside each other. float
is preferred over display:inline
since with the latter, you can't set the element's dimensions (width and height) as well as vertical paddings (top and bottom) - which floated elements can do since they're treated as block elements.
Float problems
The main problem is that we're using float
against its intended purpose.
Another is that while float
allows side-by-side block-level elements, floats do not impart shape to its container. It's like position:absolute
, where the element is "taken out of the layout". For instance, when an empty container contains a floating 100px x 100px <div>
, the <div>
will not impart 100px in height to the container.
Unlike position:absolute
, it affects the content that surrounds it. Content after the floated element will "wrap" around the element. It starts by rendering beside it and then below it, like how newspaper text would flow around an image.
Clearfix to the rescue
What clearfix does is to force content after the floats or the container containing the floats to render below it. There are a lot of versions for clear-fix, but it got its name from the version that's commonly being used - the one that uses the CSS property clear
.
Examples
Here are several ways to do clearfix , depending on the browser and use case. One only needs to know how to use the clear
property in CSS and how floats render in each browser in order to achieve a perfect cross-browser clear-fix.
What you have
Your provided style is a form of clearfix with backwards compatibility. I found an article about this clearfix. It turns out, it's an OLD clearfix - still catering the old browsers. There is a newer, cleaner version of it in the article also. Here's the breakdown:
The first clearfix you have appends an invisible pseudo-element, which is styled
clear:both
, between the target element and the next element. This forces the pseudo-element to render below the target, and the next element below the pseudo-element.The second one appends the style
display:inline-block
which is not supported by earlier browsers. inline-block is like inline but gives you some properties that block elements, like width, height as well as vertical padding. This was targeted for IE-MAC.This was the reapplication of
display:block
due to IE-MAC rule above. This rule was "hidden" from IE-MAC.
All in all, these 3 rules keep the .clearfix
working cross-browser, with old browsers in mind.
What methods of ‘clearfix’ can I use?
Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.
The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:
- css flexbox
- css grid
Modern Clearfix Solutions
Container with overflow: auto;
The simplest way to clear floated elements is using the style overflow: auto
on the containing element. This solution works in every modern browsers.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.
Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using hidden
will crop any content positioned outside of the containing element.
Note: The floated element is an img
tag in this example, but could be any html element.
Clearfix Reloaded
Thierry Koblentz on CSSMojo wrote: The very latest clearfix reloaded. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using display: block
(instead of display: table
) allows margins to collapse properly when elements with clearfix are siblings.
.container::after {
content: "";
display: block;
clear: both;
}
This is the most modern version of the clearfix.
⋮
⋮
Older Clearfix Solutions
The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.
Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.
They are listed roughly in chronological order.
"Beat That ClearFix", a clearfix for modern browsers
Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom
and ::before
property/values and simply use:
.container::after {
content: "";
display: table;
clear: both;
}
This solution does not support for IE 6/7 …on purpose!
Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."
Micro Clearfix
The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Overflow Property
This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
http://www.quirksmode.org/css/clearing.html
- explains how to resolve common issues related to this technique, namely, setting width: 100%
on the container.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Rather than using the display
property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Another way to clear floats using the overflow
property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom
property triggers hasLayout in IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
While this works... it is not ideal to use hacks.
PIE: Easy Clearing Method
This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Element using "clear" property
The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:
<br style="clear: both" /> <!-- So dirty! -->
Drawbacks
- It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.
- It adds html markup without necessarily adding any semantic value.
- It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.
- It makes code difficult to work with for others as they may have to write more hacks to work around it.
- In the future when you need/want to use another clearfix solution, you won't have to go back and remove every
<br style="clear: both" />
tag littered around the markup.
.clearfix still needed?
You don't need to use all that for modern browsers.
Simply using overflow: hidden
works and is sufficient in 99% of cases.
See this relevant question that discusses this in depth:
- Is clearfix deprecated?
Is it safe to apply clear: both; to .clearfix::before?
Using clearance in a ::before
pseudo-element is a bit weird because, while the contents of the element will be placed below the float due to clearance, the float will still overlap the element.
See what happens when you add a background:
.container { background: silver;}.float { float: left;}.clearfix { background: green;}.clearfix::before,.clearfix::after { content: ""; display: block; clear: both;}
<div class="container"> <div class="float"> outer-float </div> <div class="clearfix"> <div class="float"> inner-float </div> content </div></div>
How to use the .clearfix class?
The clearfix
class is used on a container of which all the children are floating. If you would not use this, the container would not get any height (except in IE). http://complexspiral.com/publications/containing-floats/
What you are after is not a clearfix
, but just a clear
. You could make a class.clear { clear: both;}
and apply that one instead of the clearfix
you are using now.
If you want to learn more about clearfix
, there is plenty of information out there:
What is a clearfix?
I have set up a small example to demonstrate the use of clearfix
and clear
: http://jsfiddle.net/hjXMG/1
Understanding Bootstrap's clearfix class
.clearfix
is defined in less/mixins.less
. Right above its definition is a comment with a link to this article:
A new micro clearfix hack
The article explains how it all works.
UPDATE: Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn't feel like copying and pasting was OK due to copyright, plagiarism, and what have you. However, I now feel like it's OK since I have linked to the original article. I should also mention the author's name, though, for credit: Nicolas Gallagher. Here is the meat of the article (note that "Thierry’s method" is referring to Thierry Koblentz’s “clearfix reloaded”):
This “micro clearfix” generates pseudo-elements and sets their
display
totable
. This creates an anonymous table-cell and a
new block formatting context that means the:before
pseudo-element
prevents top-margin collapse. The:after
pseudo-element is used to
clear the floats. As a result, there is no need to hide any generated
content and the total amount of code needed is reduced.Including the
:before
selector is not necessary to clear the
floats, but it prevents top-margins from collapsing in modern
browsers. This has two benefits:
It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g.,
overflow:hidden
It ensures visual consistency with IE 6/7 when
zoom:1
is applied.
N.B.: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context.
Further details can be found here: Better float containment in IE
using CSS expressions.The use of
content:" "
(note the space in the content string) avoids
an Opera bug that creates space around clearfixed elements if the
contenteditable
attribute is also present somewhere in the HTML.
Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is
to usefont:0/0 a
.Legacy Firefox
Firefox < 3.5 will benefit from using Thierry’s method with the
addition ofvisibility:hidden
to hide the inserted character. This
is because legacy versions of Firefox needcontent:"."
to avoid
extra space appearing between thebody
and its first child element,
in certain circumstances (e.g., jsfiddle.net/necolas/K538S/.)Alternative float-containment methods that create a new block
formatting context, such as applyingoverflow:hidden
or
display:inline-block
to the container element, will also avoid this
behaviour in legacy versions of Firefox.
Where to apply the clearfix class
The problem you are seeing arises because the clearing element is in the wrong place.
Consider your CSS:
h1 {
margin: 0;
float: left;
background: red;
text-indent: -9999px;
border: 1px dashed cyan;
}
nav {
height: 44px;
margin: 0;
float: right;
background: black;
border: 1px dashed cyan;
}
.group:after {
content:"x";
display:table;
clear:both;
background-color: cyan;
}
You have h1
floated left and nav
floated right, and then you have your p
block with your text (not floated).
The p
content wraps around the two floated elements as expected unless you add the clear:both
rule to p
as pointed out earlier.
The clearing element has to appear in the DOM after the nav
element.
In this example, you apply .group
to nav
, which generates content that appears after the ul
block that is a child of the nav
block.
The problem becomes more obvious is you set the nav
height to auto
and you add some borders and colors to show the edges of the various blocks.
See demo at: http://jsfiddle.net/audetwebdesign/9nGQy/
The problem can be seen as follows:
I added an x
to mark the spot in your generated content for the clearing element, which appears within the nav
block.
Related Topics
Make an HTML Number Input Always Display 2 Decimal Places
How to Type Text With Hat "^" in HTML
How to Make All Images of Different Height and Width the Same Via CSS
How to Remove Outline in Bootstrap 4
Limit the Size of a File Upload (Html Input Element)
How to Remove Free Spaces Between Divs
Selecting an Option in a Dropdown List Using Request Parameters
Placing Two Divs on Top of Each Other Without Using Position:Absolute
How to Embed an External Webpage Without Using Iframe
Force Element to Display Outside of Overflow:Hidden
Setting a Max Character Length in CSS
How to Prevent Newline At the End of HTML Input Field
Call Method from HTML Only One Time in Angular2
How to Remove All Script Tags from HTML File
Make Content Horizontally Scroll Inside a Div
Fixed Position Relative to Parent Container
Why Doesn't Percentage Padding/Margin Work on Flex Items in Firefox and Edge