Web Designer Wall
Layout

Clearing Floats in CSS: flow-root, Overflow and Flexbox

By Aigars Silkalns Updated 5 min read

Clearing Floats in CSS: flow-root, Overflow and Flexbox

The modern way to clear floats is one line: put display: flow-root on the parent. It makes the container grow to wrap its floated children, with none of the side effects of the old overflow trick or the clearfix hack. If you are still adding overflow: auto to a wrapper just to contain floats, you can stop.

This article revisits the classic “clearing floats with overflow” technique: why it works, where it breaks, what to use instead, and when you should skip floats entirely.

The problem: a parent that ignores its floated children

A floated element is taken out of normal flow. A parent whose only children are floats therefore has nothing in flow to size itself against, and its height collapses to its padding. Content that follows then slides up underneath the floats.

Three boxes with two floated squares each: the unfixed parent collapses, flow-root wraps the floats with the glow intact, overflow hidden wraps them but clips the glow at the container edge
Left: no fix. Middle: display: flow-root. Right: overflow: hidden, which cuts off the soft glow where it crosses the container edge.

The fix: display: flow-root

.container {
  display: flow-root;
}

.container .thumb {
  float: left;
  width: 100px;
  margin-inline-end: 1rem;
}

flow-root generates a block box that establishes a new block formatting context (BFC). A BFC is the region where block boxes are laid out and where floats interact with their neighbours. A container that forms one includes its floated children in its height. It also suppresses margin collapsing through its edges, which is usually what you want from a self-contained component.

MDN lists display: flow-root as creating a BFC “with no side effects”. It was designed for exactly this job, and it works in every current browser.

Baseline: display: flow-root is Baseline widely available, supported in all major browsers since 2020.

Replacing the clearfix hack

The pseudo-element clearfix did the same job with extra markup in your stylesheet. Swap it for one declaration:

/* Before: the clearfix hack */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* After */
.container {
  display: flow-root;
}

You can then delete the clearfix class from your HTML, since the component class now carries the fix.

Why overflow worked, and why to stop using it

Any block with overflow set to something other than visible or clip also forms a BFC. That is the accident the original technique relied on. It is why overflow: auto and overflow: hidden clear floats, and why they have been documented since the mid-2000s.

The drawbacks are the same ones as before, and they are the reason flow-root exists:

  • overflow: auto can add scrollbars when a long unbreakable string or an oversized image pokes out of the container.
  • overflow: hidden clips anything that extends past the box: focus rings, box shadows, absolutely positioned tooltips, negative-margin tricks.
  • It hides intent. A later reader sees overflow: hidden and assumes something is being clipped on purpose.

Note that overflow: clip does not help here. It clips without making a scroll container, but it does not create a BFC, so it will not contain floats.

The classic comment layout, without the trick

The second half of the old article used overflow: hidden on the text so it would sit beside a floated avatar instead of wrapping under it. That works for the same reason: the text box forms a BFC, and a BFC does not overlap the margin box of an outside float. You can get the same behaviour from flow-root:

.avatar { float: left; margin-inline-end: 12px; }
.comment-body { display: flow-root; }

The text now forms a straight column beside the avatar, however many lines it runs to. But today the better answer is not a float at all.

When to skip floats: Flexbox and Grid

Floats were designed for wrapping text around an image, not for building layouts. For rows of components, use a layout mode that sizes its own container:

.comment {
  display: flex;
  gap: 12px;
}

.comment .avatar {
  flex: none; /* never shrink the avatar */
}
Two comment cards with a circular avatar and text side by side, one built with float and overflow hidden and one with Flexbox
The same media object built both ways renders identically. Flexbox needs no clearing at all.

A flex or grid container always contains its children, so there is nothing to clear. It also gives you gap, alignment and reordering that floats never offered. For a deeper walkthrough, see Master CSS Flexbox in 5 Simple Steps, and for the grid side, The Simpler CSS Grid. If you are still centring things with floats and margins, CSS Vertical Centering covers the modern options.

When floats are still the right tool

One job remains where floats are correct: letting text wrap around an image or pull quote, like a magazine layout. That is the case the property was made for.

.article img.align-start {
  float: inline-start;
  margin-inline-end: 1.5rem;
  margin-block-end: 0.5rem;
  max-width: 40%;
  height: auto;
}

.article { display: flow-root; }

float: inline-start and inline-end are logical values that follow the writing direction, so the same CSS works in right-to-left languages. Putting display: flow-root on the article keeps a floated image at the end of the content from hanging out below it. If you want text to wrap around a non-rectangular shape, add shape-outside, which only applies to floats.

The old overflow companions, updated

The original article suggested two fixes for content that overflows a clipped container. Both are still sensible defaults, written a little differently now:

.container {
  overflow-wrap: break-word; /* replaces the old word-wrap */
}

.container img {
  max-width: 100%;
  height: auto;
}

word-wrap survives only as a legacy alias for overflow-wrap, so use the standard name. If you switch to flow-root, you no longer need these to avoid scrollbars, but they still stop long URLs and wide images from breaking your layout, which is worth doing anyway. For more on the image side, see 5 Useful CSS Tricks for Responsive Design.

Debugging a collapsed container

If a parent still looks too short, open DevTools and work through these checks in order:

  1. Confirm the children are floated. A child with position: absolute collapses the parent for a different reason, and flow-root will not fix it.
  2. Look for a stray clear. A clear declaration on a sibling that should be inside the container can push layout around.
  3. Check for an overriding display. A later display: block silently removes the BFC.
  4. Keep the fix on the component class. A rule on the component, rather than a utility applied in one place, is far easier to trace.

Which one should you use?

Situation Use
Parent must wrap floated children display: flow-root
Text should sit beside a float, not under it display: flow-root on the text box
Row of components (media object, cards, nav) Flexbox or Grid
You also need to clip content or scroll overflow, deliberately
Wrapping text around an image float with logical values, plus flow-root on the parent

If you maintain an older stylesheet, a search for clearfix or overflow: hidden next to float is a good place to start. Replace them with flow-root, then check that nothing relied on the clipping. For a broader refresher, 20 Pro CSS Tips is a good follow-up.

108 comments from the archive

  1. Very usefull tip. I didn’t know it, ant that cases have always been a pain for me. Thanks a lot for the help :D

  2. I used it in a project a few days ago, it’s a good way to clear floats w/o clearfix. And I was getting a scrollbar. :) I’ve spend quite some time to figure everything out, as I’m just starting out and still learning many css topics mostly via trial and error.

    On a side note, you should swap the code examples at the end of the article. :)

  3. Thanks for the tip on the overflow hidden for comment text. Text wrapping around image always bothered me and I always had to come up with workarounds. Your tip will saved me lots of time.

  4. I think there is a mistake:
    In the text you are stating to give the text an “overflow:hidden” but the picture says “overflow:auto”. Or am I just confused?

  5. I’ve always used overflow : auto as a means of clearing divs. The scrollbar issues have always been minor and tend to arise when you are working in a confined space, like a header with set height.

    I had no idea about the overflow : hidden trick in your second example, that’s going to be put to use sometime soon.

  6. There is a small mistake at the end: you’ve mixed the code examples of word-wrap and max-width fixes.

  7. What? Huh? This is like a revelation? All this time I’ve been using the guillotine CSS to clear floats. If this is so easy and clean, howcome this hasn’t become mainstream? I’m surprised I never knew about this. Any catches? Browser compatibility?

  8. Nice little post! You’re right – it’s a common issue with an easy solution that seems to have been forgotten. Very helpful, thanks.

  9. You are right – I burrowed this solution deeply …
    On quirksmode I read amending:

    width or height required
    The use of a width or height declaration is required to make the effect work in Explorer Windows and Opera. If you don’t include it Explorer Windows continues to show the border at the top of the columns, as if there were no overflow. Opera completely hides the content of the container.

    A width: 100% is a neat starting point, although more complicated layouts may require other values.

  10. yes i know this tip it’s useful. it depend of design, whether use clear:both (e.g. footer) or, overflow:hidden. I always keep in mind both if i haven’t solutions i use overflow:hidden.

  11. Been using overflow:hidden forever. But I question the design quite a bit on this. Why should we lose height properties of the container element when elements inside use float? That seems very unintuitive.

  12. I use { display:table } to expand containers automatically.
    Works like a charm, and still use margin, padding, etc…

  13. Yeah, this method is incredibly handy. Although at this point when I do client work I generally avoid using overflow:hidden or auto. I can’t count how many times I’ve had to re-work the html/css of a layout to allow some tooltips or other overlay that would’ve been otherwise hidden by the container. Use with caution.

  14. If you giive overflow:auto it will give more space which again you need to play with the width:

    instead why not only give

    .container{
    background: none repeat scroll 0 0 #E6EEF2;
    border: 1px solid #999999;
    padding: 10px;
    float: left; /*Add this Property*/
    width: 94% /*Add this Property*/
    }

    Now if you check in any browser it will work similar No CSS hacks needed incase if you want to need this Container where there is no Float Needed and then make a class .noFloat with float:none and inherit it in Container.

    Problem Solved

  15. Thanks for this great article. It’s indeed an alternative to using additional clear elements.

    But you mixed up the code examples for word-wrap and max-width. ;-)

  16. Okay this seems to be a revealing. I never knew it was possible to sort of ‘clear’ floats with the overflow auto!

    So all those times i’ve been using and extra div for the clear it could and can also be done just by using the overflow auto on the container/wrapper of the floating elements?

    I’ve tested it with a simple layout:

    enough text
    enough text

    FOOTER

    with the styles


    div { margin:0; padding:0; }
    .wrap {
    margin:auto;
    width:900px;
    height:auto;
    background-color:#9F3;
    overflow:auto;
    }
    .footer {
    margin:auto;
    width:900px;
    height:120px;
    background-color:#0CF;
    }
    .left {
    width:400px;
    height:auto;
    float:left;
    background-color:#CC0;
    }
    .right {
    width:400px;
    overflow:auto;
    background-color:#693;
    }

    And it works like a charm! not even need to flow the right column and the footer’s nicely pushed away.

    I’ve tested this on all browsers except explorer. Could someone aknowledge it also works in explorer?

    Great post!

  17. Oh it seems that in my previous comment the html code won’t show properly.

  18. I used that too some time ago. But this method has some problems with the page break when printing the website… at least in Firefox.

    Using the clearfix instead:

    .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
    .clearfix{display:inline-block;}
    * html .clearfix{height:1%;}
    .clearfix{display:block;}

    Works in IE6 but the class is needed in the markup.

  19. @niko_lang

    you mean when actualy printing out the website? Well since a site isn’t for printing it doesn’t realy matter. And if things on a site need to be printed just create an print-friendly page of an article or so to print.

  20. Thanks for the tip. Putting in that extra DIV has always annoyed me.

  21. I used to clear floats with overflow: hidden; bur now i prefer using the :after method described in this article : https://perishablepress.com/new-clearfix-hack/

    /* new clearfix */
    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

  22. Nice reminder – I used to know this, but almost forgot about it … As chance would have it, I have a situation right now where I can use this! ;)

  24. Re: IE6 workaround

    I used to always use this technique but tend to use the clearfix technique more now. The overflow technique is still handy though in cases where you don’t want to add an additional class to a div. However, if you need to support IE6, using overflow: hidden alone doesn’t work.

    Solution
    You need to either add height: 1% or zoom: 1
    It seems you can add height:1% to the parent div without it effecting IE7, IE8, Chrome or Firefox. However to be a little more semantic, you should probably set up an IE conditional stylesheet specific to IE6. Alternately, if you aren’t against hacks in your css you could just use *height: 1%, which will only be rendered by IE6 and IE7.

    Personally I go with an IE6 conditional stylesheet or zoom:1 (depending how lazy i am).

    Unfortunately, at the moment I can only test this with IEtester so it may not be 100% reliable information. Maybe if someone can confirm with an authentic IE6 install.

    Give it a go :)

  25. I’ve been using this technique for years. It’s the best way to clear floats with no need to muck up the mark up.

    There is a situation where the overflow method will cause problems. If you want to hang an element outside of a container, margin-left:-15px for example, then using overflow will get in your way.

  26. I’ve found that using “display: table;” can also work. I haven’t used it extensively so I’m not really too sure of any problems it could present. Anyone know anything else about using it and any problems it could bring up?

  27. Awesome technique, but watch out for elements styled with box shadows. If the parent container is using overflow:hidden, the drop shadow will be cut off. For such cases, I prefer the float everything method or the new clearfix method.

  28. @Boolian

    Are you for real? Man, forget about IE6!
    Haha i ain’t paying attention just for that mistake called IE6 :)

  29. This very thing kills me, having to add unwanted div’s and wrappers to my HTML. Thumbs up for this!

  30. @Alex

    I agree with you completely about IE6 :-) Most projects you can forget about it… However some of us work with corporate environment clients who still run IE6. Alot of these companies have core systems in place that only work in IE6 and are unable to upgrade… some just have lazy IT departments. It’s a sucky situation but what can you do. IE6 isn’t dead yet unfortunately :-(

  31. Thanks for this tip. It would come handy, hope there are no cross browser issues with this trick.

    Also wanted to point out that there are 2 mistakes in the post:
    – The illustration for Comments Block says overflow:auto when it should be overflow:hidden
    – Images for ‘Max-Width’ and ‘Word-Wrap’ need to be interchanged.

  32. I thought I had read this somewhere!! I use this all the time rather than using a clearfix or similar methods, and I started to question if it was ‘acceptable’ or not. However, I’m glad you mentioned the drawbacks with this. When trying to position child elements outside of the container with overflow:hidden set, that certainly does become an issue.
    I’m surprised at the attitude towards IE6 on some of the below. I was surprised to see some stats recently on the percentage of users still using IE6, mainly from large corporate companies.
    Thanks Nick

  34. Wonderful tip! In the years I have been wrestling with CSS been looking for my divs to do just this! Awesome!

  35. Good article. Its important to remember to design your css just the way you said!

  36. If you use overflow: auto; to clear the floating, some browsers also need a value for the “width”-property on the container.

  37. This is really useful stuff Nick, thanks for keeping the blog updated. Often times web designers just can’t find all the time anymore to keep up and study these new techniques. Roundup posts such as these are an excellent introduction into the topic(s) :)

  38. I didn’t know this. I have always used a clearing element below the floated elements. I will be using this from now on. Thank you.

  39. Simple, but great article! You wouldn’t believe how many complex, messy solutions I see for clearing floats every day! These are key concepts to master early on for anyone who is serious about learning CSS.

  40. Wow! two (big) solutions in one article :)

    How is possible that nobody saw it before? Excellent post. Simple and usable

    Thank you

  41. Hello Guys!

    Why don’t we use simpe “display:table”? If we use this on our container boxes, the children floating elements will expand the containers.

  42. In most cases this is the simplest and most reliable method of float clearing – thanks for explaning so clearly. The code blocks for large images and long lines of text shown above are back to front.

  43. As always, Well Done. I have used this method a few times and it is one of the most reliable was to clear a float in websites…

  45. @Jeff Starr

    Elements with “overflow: hidden;” will still render box shadows however after some testing I discover that while “display:table” will clear floats, it will stop a box shadow form rendering.

  46. Thanks guys! This trick is awesome, just bookmarked it ;)

  48. Its a nice trick… though I still think that the solution of just adding a div with a clear both rule is the best way to handle these types of problems

  52. Thanks! I like it.
    By the way ‘Word-wrap’ and ‘Max-width’ codes are up side down aren’t they?

  53. yeahh, good tutorial. i think its better than the clearfixes like them from sonspring.

  54. All whitening formulation is applied by dentists with quality features, powerful, secure, and very reasonable prices, as well as the missing handbag is a unique product design, fashion styling you will not ..

  55. I have been learning all this stuff recently, and let me tell you, I have really been learning a lot. This blog is one of my favorites, but if it wasn’t for then I would have never been able to code. I am really excited about HTML5 and CSS3 though. I can’t wait to learn that.

  56. Using this method for long time now and still think that this is the best method for clearing floats.

  57. Floats are great, but oh so many headaches!
    Thanks for this little hack to help sort out the problem.

    I use “…adding an element with clear float after the floating elements…”
    Does the job and no downside.

  58. I didn’t know this trick, it’s really useful and works well even on IE7. Unfortunately it doesn’t work on IE6, but I know it’s time to forget about it,isn’it?

  59. Overflow:hidden is usable but if you have some content or buttons or images that should out of box it is not suitable. If your design accepts you can give float:left or right to container instead of overflow.

  60. Thank you for revisiting this topic. It may not be new but it is new to me. I have good working knowledge of float and clear but always feel like I’m adding one too many div containers to get what I want sometimes.

    Definitely trying this one next.

  61. display:inline-block or float:left/right work as well.

    @Keith Davis (89)
    “I use “…adding an element with clear float after the floating elements…”
    Does the job and no downside.”

    No Downside? Unneccessary DOM elements? It’s HTML dealing with stuff that’s CSS’ business… At work we call that a pussy div.

  62. An old trick that I’d tell everyone that’s new to the field. Use with caution though but 9 times out of 10 I’d use this.

  63. This is exactly what I was looking for, helps me a lot for someone new to css. Thanks!

  64. Thankx for sharing this,this was becoming severe headache for me these floats.It helps me the best and solves my problem.

  65. in this case instead of using the ‘div’ a simple ” after the element also addresses… not?

  66. in this case instead of using the ‘div’ a simple ” after the element also addresses… not?

  67. in this case instead of using the ‘div’ a simple br w/ clear=”all” after the element also addresses… not?

  68. I used overflow:hidden; in most of the cases and really works fine.

    thanks for tip about image

    .container img {
    max-width: 100%;
    height: auto;
    }

  69. Hi I like the comments section portion of your website that is nice and neatly designed. Can you please refer me how can I get this section to embuid in one of my website.

  70. I find myself using overflow:hidden frequently as in my opinion it is one of the more robust methods of clearing floats. There are occasions however where it’s not suited. For example on my homepage: I have three screenshots of recent projects. Each has a subtle box shadow applied to it which if I used overflow:hidden would be clipped so I used clearfix instead. It’s yet again a case of right tool for the right job.

  71. Thanks yaar, solved my problem for which i was searching stuff from the past six months. The thing which was useful for me was and one thing i had a error was i made parent tag relative and child tag position absolute which was the error from those days. I removed the position tag from them and added the clear div. Its working fine now. Thank you.

  72. For those of you complaining that this doesn’t work in IE6, you need to trigger hasLayout on the container for it to clear. This can be done in a number of ways, but the easiest way would be to add width: 100%; to the .container class.

    If adding a width messes up your design, you could add zoom: 1; instead which will also make it work in IE6.

  73. Interesting way to go about solving the clearing float problem. I always used the clearfix method. I guess it’s good to have a few other options. Adding another div to clear floats should definitely be avoided as it adds useless markup.

  74. You have showed great perseverance behind the blog. It’s been enriched since the beginning. I love to share to with my friends. I spent almost half an hour daily here. Carry on.

  75. Great tip I hate using div’s to clear my floats so this will come in useful for sure :-)

  76. I tried this method but wasn’t able to continue with it because I had a number of tooltip-type flyouts that appear on hover and need to appear over/outside the border of the overflow:hidden/auto’d element. With this fix, the element showed scrollbars or just hid the popped up content. Any suggestion on how to make that work? Great redesign. Inspiring.

  78. Cool stuff what I’m looking for is how two have on left float and one right float having the same height even if one has more content then the other anyone knows how to do that thanks

  79. Nice article! Just one correction needed though – your code snippets for word-wrap and max-width are the wrong way round! ;)

  80. “overflow: hidden;” is the best of them, “auto” can generate scroll-bars in some browsers.

  81. I like the overflow auto technique. If I have scroll bar issues I find it easy to fix by throwing in some padding to the container in question.

  83. Hadn’t really seen this way of clearing floats before. I’ll have to remember this one as it could prove very handy!

  84. Very useful tip and explained very well infact the drawbacks you have mention also describring and solving the issue at same time.Thanks for sharing

  85. Nice article, just one thing, IE 9 doesn’t render overflow: hidden correctly, it totally removes all content from view.

  86. I’ve noticed that content won’t print properly using this methodology.

  88. This is very cool.

    I wonder why using a “clear” fix is so popular. This technique is much cleaner, no extra elements.

    Any cross browser drawbacks?

  89. Thanks for this very useful tip.

    I think the code for “Max-Width” and “Word-wrap” are in the wrong places…

  90. Why would anyone use “clearfix” if this has been an option all along? This is great, thanks again Web Designer Wall Man!

  91. I am a web designer at Creare Communications and use overflow:hidden in the majority of the websites I have created. One of the main benefits I find it brings is the ability to use the same styles on different pages, as this allows you to use a container which can expand or shrink to fit to the content within it.

    Overflow:hidden is also helpful when viewing a website in all browsers. I have found that in IE your text renders differently to Safari or Firefox. This can be an issue if you have a height on your container which can then cause the text to be cut short. By simply taking the height off and replacing it with overflow:hidden it enables the div to expand to the size of the content within it.

    Great article.

  92. Your code-snippets for max-width and word-wrap are switched.

    Nice article!

  93. I think the css code examples need to be swapped. The max width css example is actually for the word wrap. The word wrap css example is actually for the max width.

  95. Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

  96. “word-wrap:break-word” only suits IE isn’t it ? So how to deal with the problem in other browser ?

    1. … i made a mistake. I know the “word-wrap” should match the setting of “overflow:hidden”.

  97. really good useful information I usually use clear float which I am not too happy with but will def try this out, btw love the new site, miss the old flowery one though..

  98. i’m new learner . and i’m always confused by the overfloat code . i don’t know where should i coding it , or even when the problem appeased , i don’t know how to deal with it . your post inspirate me . thanks .

  99. One difference between the overflow:hidden and clearfix methods is that overflow can interfere with horizontal alignment. I had an element centred with {width: 960px; margin: 0 auto;}. Adding overflow:hidden to the element pushed it hard left in Firefox and Opera (it rendered fine in Chrome). I ended up reverting to clearfix as it worked across all three browsers. I also know how it works whereas I never understood why overflow cleared floats.

  100. Thanks dear….
    this is really an awesome solution. i try it and it works well

  101. What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?

  102. Useful posts…easily understadable about floating div’s. Word wrap and Max width examples swaped.

  103. I enjoyed this great, simple and important article, however, I noticed that there is a small mistake at the end.
    It seems that you’ve put the code for word wrap under the max-width title and vice versa.

    thanks,
    elmalak

  104. this is so handy!! as a bit of a CSS novice this is going to make life so much easier

  105. Your Word Wrap and Max-Width CSS examples are mixed up. They’re going to the wrong headings.

  107. Excellent post. I think that CSS clearing floats are always better then this.
    Thanks

Comments are closed on this article.