Use of float, clear and clearfix in HTML/CSS
2018-04-05

The horizontal menu under the title bar of my pages consists of two floating <div> blocks. On the left, there is only the one Home link while the block on the right contains the other links: About, Programming and so on. The vertical alignment of the next element on the page, whether a search box, a date, or a paragraph as the case may be, was tricky and my solution was the worst possible. It was time to revisit this issue. Once again, many have already found good solutions.

Table of Contents

  1. The Problem
  2. The W3C <br... Fix
  3. The clearfix Solution
  4. It Was Anticipated : overflow
  5. The New Modern clearfix
  6. Conclusion

  1. The Problem
  2. Here is a typical HTML layout problem that is often encountered. To start, there is a container block of type <div>. who will occupy 90% of the total width and that will be aligned in the centre. Between the tags defining this container there is a paragraph with a date also centre aligned and two other <div> zones containing text, one that floats to the left and the other on the right. Finally, the container area is followed by a paragraph displaying a second date aligned with the right margin.

    <div style="width:90%; border:1px solid green; margin-left:auto; margin-right:auto"> <p style="text-align:center">date: 2018-02-03</p> <div style="float: left; width:40%; border:1px solid red"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse. </div> <div style="float: right; width:40%; border:1px solid blue"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam. </div> </div> <p style="text-align:right; border:1px solid #aaa; margin:0; padding:0">date: 2018-02-04</p>

    Where will the second date be situated? Probably not where one would have desired as can be seen below.



    date: 2018-02-03

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam.

    date: 2018-02-04




    Because they are floating areas, the two text boxes are not contained graphically in the parent container area even if they are between the <div> and </div> tags of the parent <div> block. The green outline shows that the vertical size of the parent block only takes into account the first date. So the browser places the second date under this zone, ensuring that its text does not encroach on the floating zones. By contrast, the frame around the second paragraph that occupies the entire width tramples over the floating areas.

    I was trying to fix the problem by setting the vertical size of the parent container area. This method is frankly bad. To see that reduce the horizontal size of the browser window so that the two floating text boxes occupy an increasing vertical space until it exceed the fixed vertical size of the container area.

  3. The W3C <br... Fix
  4. The World Wide Web Consortium (W3C) has apparently provided a fix, a <br> tag with a clear:both style. It is placed before the paragraph containing the second date.

    <div style="width:90%; border:1px solid green; margin-left:auto; margin-right:auto"> <p style="text-align:center">date: 2018-02-03</p> <div style="float: left; width:40%; border:1px solid red"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse. </div> <div style="float: right; width:40%; border:1px solid blue"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam. </div> </div> <br style="clear:both"/> <p style="text-align:right; border:1px solid #aaa; margin:0; padding:0">date: 2018-02-04</p>

    At least, the second date is now below the floating text boxes no matter what their height might become as the width of the browser window is modified.



    date: 2018-02-03

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam.

    date: 2018-02-04


    This solution is not perfect. For example, the border drawn around the initial container does not encompass the two floating text areas. In addition, we added an element structuring the visual presentation to HTML text. This is something to avoid especially since the introduction CSS styles.

  5. The clearfix Solution
  6. We can replace <br style="clear:both"> with a <div> that has the same clear attribute and occupies the full width of its container, but has no vertical dimension.

    <div style="width=100%; clear:both; font-size:0">&nbsp;</div>

    Note that the block contains a non-breaking space &nbsp; but that is printed with a 0 height font. This is a trick to make sure all web browsers "print" the item. This is not better to the solution proposed by the W3C, but it makes it possible to better understand the many variants of clearfix solution already available for a number of years. Among these, I used that of Jeff Starr proposed in 2005 and revised in 2017 since it was the most recent of those that I had found.

    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: block; }

    The operating principle is as follows. The <div> block containing the floating zones will be of class clearfix. This class has a pseudo after element that inserts its content after the <div> has been displayed. And what it inserts is basically the zero height space as in the zero vertical dimension <div> shown above.

    <div class="clearfix" style="width:90%; border:1px solid green; margin-left:auto; margin-right:auto"> <p style="text-align:center">date: 2018-02-03</p> <div style="float: left; width:40%; border:1px solid red"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse. </div> <div style="float: right; width:40%; border:1px solid blue"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam. </div> </div> <p style="text-align:right; border:1px solid #aaa; margin:0; padding:0">date: 2018-02-04</p>

    As can be seen, the clearfix class <div> adjusts its height to include the two floating zones.



    date: 2018-02-03

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam.

    date: 2018-02-04



    References:

    Lessons Learned Concerning the Clearfix CSS Hack
    Jeff Starr, Feb. 5, 2008, updated Jan. 15, 2017.
    Clearing Floats: Why is it Necessary Even in “Modern” Browsers?
    Louis Lazaris, Oct. 23, 2012.
    Utiliser la class clearfix
    Renaud Anney, Aug. 16, 2012
    How To Clear Floats Without Structural Markup
    Big John, Mai 14, 2004, updated July 2, 2008
    Simple Clearing of Floats
    Alex Walker, Feb 26, 2005

  7. It Was Anticipated: overflow
  8. Reading the last two references mentioned above, it seems that a simpler solution was pretty much always available. Just add overflow:auto in the style of the parent <div> container.

    <div style="width:90%; border:1px solid green; margin-left:auto; margin-right:auto; overflow:auto"> <p style="text-align:center">date: 2018-02-06</p> <div style="float: left; width:40%; border:1px solid red"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse. </div> <div style="float: right; width:40%; border:1px solid blue"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam. </div> </div> <p style="text-align:right; border:1px solid #aaa; margin:0; padding:0">date: 2018-02-04</p>

    It works and it's simple. On the other hand, it's a bit difficult to understand since the role of the overflow attribute is to manage the use of scroll bars when the contents of a block exceeds its size. It's not clear to me why this is the block size is adjusted. At the same time, it is not clear a scroll bar should be added to see the floating text areas which are already visible.



    date: 2018-02-06

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam.

    date: 2018-02-04



  9. The New Modern clearfix
  10. The w3schools warns that

    ... overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars) ».
    in a page entitled CSS Layout - float and clear. There is a longer discussion of the problems that can arise with this approach in Clearing floats by Peter-Paul Koch (March 2005).

    He suggests the following CSS element.

    .clearfix { overflow: hidden; width: 100%; }

    I have a problem understanding overflow:auto, overflow:hidden makes even less sense to me if at all. But it does work. The width attribute could be replaced with a height attribute often set to 1px ou 1%. Also it is not necessary to set the width to 100%, it is set to 90% in the example I provide.

    The solution propounded by w3schools itself is to use the following pseudo element..

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

    Since it is not necessary to include any attribute in the clearfix style, it does not need to be defined; the pseudo-element is enough. However, we will continue to use class="clearfix" in the HTML file.

    Note the double colon to indicate the pseudo-element. It seems like a recent change in syntax.

  11. Conclusion
  12. I checked all these solutions using test.html and they all work for the small alignment problem that I presented here, which is what I use on this site.

    To be more specific, I looked at the page with versions recent browsers on operating systems the more common.

    Browser System
    FirefoxWindows 10, Ubuntu 17.1, Android 6
    ChromiumUbuntu 17.1
    ChromeAndroid 6
    EdgeWindows 10
    Internet ExplorerWindows 10
    SafariOSX, IOS

    Of course, there are other browsers and other operating systems. There are also older versions of browsers; the oldest did not fully comply with W3C standards. However, is this really necessary to make sure compatibility with Firefox 3.5? Especially on a site like this?

    I decided to use the new modern clearfix from w3schools because, in principle, all recommendations found on that site have been verified with several browsers some of which I do not have.

    Whatever solution is chosen, it seems to me preferable to proceed using a style that could be called clearfix or something else. I read somewhere that there is a CSS attribute on its way to solve this problem explicitly. If we have dispersed overflow:xxxx in several other styles, it could be more difficult to move to the new attribute in due time.