This question already has answers here:
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 8 years ago.
Although elements like <div>s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent elements, the parent will collapse.
For example:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
The parent div in this example will not expand to contain its floated children - it will appear to have height: 0.
How do you solve this problem?
I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out.
Solution 1
Float the parent.
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
Pros: Semantic code.
Cons: You may not always want the parent floated. Even if you do, do you float the parents' parent, and so on? Must you float every ancestor element?
Solution 2
Give the parent an explicit height.
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
Pros: Semantic code.
Cons: Not flexible - if the content changes or the browser is resized, the layout will break.
Solution 3
Append a "spacer" element inside the parent element, like this:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div class="spacer" style="clear: both;"></div>
</div>
Pros: Straightforward to code.
Cons: Not semantic; the spacer div exists only as a layout hack.
Solution 4
Set parent to overflow: auto.
<div style="overflow: auto;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
Pros: Doesn't require extra div.
Cons: Seems like a hack - that's not the overflow property's stated purpose.
Comments? Other suggestions?
Solution 1:
The most reliable and unobtrusive method appears to be this:
Demo: http://jsfiddle.net/SO_AMK/wXaEH/
HTML:
<div class="clearfix">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
CSS:
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
With a little CSS targeting, you don't even need to add a class to the parent DIV.
This solution is backward compatible with IE8 so you don't need to worry about older browsers failing.
Solution 2:
An adaptation of solution 1 has been suggested and is as follows:
Demo: http://jsfiddle.net/wXaEH/162/
HTML:
<div class="clearfix">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
CSS:
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
.ie7-clear {
display: block;
clear: both;
}
This solution appears to be backward compatible to IE5.5 but is untested.
Solution 3:
It's also possible to set display: inline-block; and width: 100%; to emulate a normal block element while not collapsing.
Demo: http://jsfiddle.net/SO_AMK/ae5ey/
CSS:
.clearfix {
display: inline-block;
width: 100%;
}
This solution should be backward compatible with IE5.5 but has only been tested in IE6.
I usually use the overflow: auto trick; although that's not, strictly speaking, the intended use for overflow, it is kinda related - enough to make it easy to remember, certainly. The meaning of float: left itself has been extended for various uses more significantly than overflow is in this example, IMO.
Rather than putting overflow:auto on the parent, put overflow:hidden
The first CSS I write for any webpage is always:
div {
overflow:hidden;
}
Then I never have to worry about it.
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:
{ clear: both; }
clearfix
Once you understand what is happening, use the method below to “clearfix” it.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Demonstration :)
There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors.
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 should use the following technique :
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
#extend %clearfix;
}
If you don't care about support for older browsers, there's a shorter version :
.clearfix:after {
content:"";
display:table;
clear:both;
}
Although the code isn't perfectly semantic, I think it's more straightforward to have what I call a "clearing div" at the bottom of every container with floats in it. In fact, I've included the following style rule in my reset block for every project:
.clear
{
clear: both;
}
If you're styling for IE6 (god help you), you might want to give this rule a 0px line-height and height as well.
The ideal solution would be to use inline-block for the columns instead of floating. I think the browser support is pretty good if you follow (a) apply inline-block only to elements that are normally inline (eg span); and (b) add -moz-inline-box for Firefox.
Check your page in FF2 as well because I had a ton of problems when nesting certain elements (surprisingly, this is the one case where IE performs much better than FF).
Strange no one has come up with a complete answer for this yet, ah well here it is.
Solution one: clear: both
Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. http://jsfiddle.net/TVD2X/1/
Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.
Cons: Requires the another tag to clear the floats, bloating markup.
Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.
Solution two: display: table
Adding display:table; to the parent to make it shrug off the floats and display with the correct height. http://jsfiddle.net/h9GAZ/1/
Pros: No extra markup and is a lot neater. Works in IE6+
Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.
Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.
A note on the other "solutions"
These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.
Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.
Setting the height does "prevent" the collapse but it is not a proper fix.
Invalid css
Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.
In conclusion
I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.
I use 2 and 4 where applicable (i.e. when I know the content's height or if overflowing doesn't harm). Anywhere else, I go with solution 3. By the way, your first solution has no advantage over 3 (that I can spot) because it isn't any more semantic since it uses the same dummy element.
By the way, I wouldn't be concerned about the fourth solution being a hack. Hacks in CSS would only be harmful if their underlying behaviour is subject to reinterpretation or other change. This way, your hack wouldn't be guaranteed to work. However in this case, your hack relies on the exact behaviour that overflow: auto is meant to have. No harm in hitching a free ride.
My favourite method is using a clearfix class for parent element
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
One of the most well known solutions is a variation of your solution number 3 that uses a pseudo element instead of a non-semantic html element.
It goes something like this...
.cf:after {
content: " ";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
You place that in your stylesheet, and all you need is to add the class 'cf' to the element containing the floats.
What I use is another variation which comes from Nicolas Gallagher.
It does the same thing, but it's shorter, looks neater, and maybe used to accomplish another thing that's pretty useful - preventing the child elements' margins from collapsing with it's parents' (but for that you do need something else - read more about it here http://nicolasgallagher.com/micro-clearfix-hack/ ).
.cf:after {
content: " ";
display: table;
clear: float;
}
add this in the parent div at the bottom
<div style="clear:both"></div>
The main problem you may find with changing overflow to auto or hidden is that everything can become scrollable with the middle mouse buttom and a user can mess up the entire site layout.
Another possible solution which I think is more semantically correct is to change the floated inner elements to be 'display: inline'. This example and what I was working on when I came across this page both use floated divs in much exactly the same way that a span would be used. Instead of using divs, switch to span, or if you are using another element which is by default 'display: block' instead of 'display: inline' then change it to be 'display: inline'. I believe this is the 100% semantically correct solution.
Solution 1, floating the parent, is essentially to change the entire document to be floated.
Solution 2, setting an explicit height, is like drawing a box and saying I want to put a picture here, i.e. use this if you are doing an img tag.
Solution 3, adding a spacer to clear float, is like adding an extra line below your content and will mess with surrounding elements too. If you use this approach you probably want to set the div to be height: 0px.
Solution 4, overflow: auto, is acknowledging that you don't know how to lay out the document and you are admitting that you don't know what to do.
I believe that best way is to set clear:both to the upcoming element.
Here's why:
1) :after selector is not supported in IE6/7 and buggy in FF3, however,
if you care only about IE8+ and FF3.5+ clearing with :after is probably best for you...
2) overflow is supposed to do something else so this hack isn't reliable enough.
Note to author: there is nothing hacky on clearing... Clearing means to skip the floating fields. CLEAR is with us since HTML3 (who knows, maybe even longer) http://www.w3.org/MarkUp/html3/deflists.html , maybe they should chose a bit different name like page: new, but thats just a detail...
as i read around the web, it's a valid html5 practice to wrap block elements inside <a> elements. i have a problem though.
my html
<a href="http://google.com" target="_blank">
<div> </div>
</a>
my css
div {
background:#f00;
height:100px;
margin-left:10px;
width:300px;
}
a {background:blue;}
the link actually works, but i see no blue background and chrome says that my a have no height and width
changing the css of the a to display:inline-block does the trick here, but not in my website.
do you have any suggestion or solution? how come the a element doesn't "follow" its child?
thank you!
http://jsfiddle.net/72cYy/82/
it depends on what you're looking for, you can set a to display:block if you want it to behave like a block element:
a {
display: block;
background:blue
}
EXAMPLE 1
or you could set it to display: inline-block to make it behave like it natrually would:
a {
display: inline-block;
background:blue
}
EXAMPLE 2
There is no reason that either of these wouldn't work on your site. Perhaps you have CSS or javascript overwriting it? Both of these methods will fix the collapsed height/width issue. If it is a conflicting CSS issue you could be more specific by adding an id or a class:
a#wrapper{
display: inline-block;
}
or
a.wrapper{
display: inline-block;
}
For more information on collapsed elements, you can check out this SO answer
I have a site - you can see it here i have a screenshot here i want to stop my readmore text wrapping around the image when its a small image and a large amount of text
<div class="page-list-ext-item">
<div class="page-list-ext-image"><img width="110" height="73" class="attachment-110x110 wp-post-image" src="#"></a></div>
<h3 class="page-list-ext-title">Heading</h3><div class="page-list-ext-item-content">TEXT
<br><br>read more on: Title
</div>
You might want to add
.page-list-ext-item-content{
overflow:hidden;
}
This will work.
The first thing you need to do is to rewrite your markup so that it can validate. The above markup won't validate. Browsers always try to fix invalid markup, but from a pure CSS perspective this kind off markup is often the main cause of several bugs. In your case, a float always need a container with a clearance on it, such as:
.clear:after {
content: '.';
display: block;
overflow: hidden;
clear: both;
height: 0;
visibility: hidden;
}
This will clear the container of your thumbnail but you still need to fix your markup.
I am simply using a div of this nature to clear an area after floats:
.clear {
clear:both;
}
however, I am seeing it is causing a big space in my formatting and I'm not sure how to rid of it. what do you think may be happening?
thank you!
In case anyone else runs into this problem, the solution is to add this to the group's parent; that is the element that is causing the problems:
overflow: auto
i.e.:
<div style="overflow: auto">
<div style="float: right">Testing</div>
<div style="clear: both"></div>
</div>
Try to use a line height , it should fix the problem.
Is it happening only on IE , if so add line height
do something like this
.clear {
clear: both;
height: 0px;
overflow: hidden;
}
I would just apply the clear: both attribute to the next content element (i.e. div) instead of creating an empty div (which I'm assuming that you are doing).
Demo: http://jsfiddle.net/wdm954/ArDhF/1/
I had the same problem with several small left-floating tables next to each other. The clear div afterwards took a lot of white space without having any height, nor padding or margin.
The solution: Wrap all tables within a div, then assign overflow-hidden to that div and (this is important) a value for the height.
E.g.
.tablecontainer {
height: 70px;
overflow: hidden;
}
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.