Floated Child Elements: Overflow:Hidden or Clear:Both

Floated Child Elements: overflow:hidden or clear:both?

1. Hidden overflow - pretty solid method. The main disadvantage is if you set a height on the parent element, any overflow will be...well, hidden. I found this when creating a menu with floated list items - the submenus would not appear.

2. Clearing element - rather than a line break, I would use a div with height: 0; clear: both; since it won't create a gap below. This is a more solid method, the only disadvantage being an extra element in the markup.

3. Float the parent - in my experience there are too many situations where you don't want to float the parent element, so I would avoid it.

4. You can also use the generated content method:

   #parent:after {
     content: ".";
     visibility: hidden;
     clear: both;
   }
   

   This saves the need for an extra element in the markup, but it won't work in IE7 and below.

5. Use inline blocks - just remembered this method. Instead of floating the two columns, set them to display: inline-block and they will appear side-by-side:

   .child {
     display: inline-block;
     vertical-align: top;
   }
   

   Only thing you must remember with this method is if there is any whitespace between the close tag of one block and the opening tag of another, a space will appear between the columns (the size of which depends on the font so it difficult to gauge). As long as you do ...</div><div id=... then this method works fine and is superior to floating elements IMO.

Do clear:both and overflow:hidden work the same way to make a container wrap floated children?

Do clear:both and overflow:hidden work the same way to make a container wrap floated children?

No. They perform different functions.

clear:both

The clear property controls whether an element can be next to or below floated elements that come before it. It controls whether an element can clear the floated elements.

clear:both, when applied to a non-floating, block-level element:

Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

_{source: https://www.w3.org/TR/CSS2/visuren.html#propdef-clear}

So the clear property more likely applies to a sibling of floated elements. It has nothing to do with stretching the height of div which has float children (as stated in your question).

overflow:hidden (or overflow:auto)

The overflow property, when used with a value other than visible, creates a new block formatting context. This causes the element containing floats to expand in order to contain its floated children.

In summary, one property clears an element past floated elements. The other stretches the container to wrap floated elements. The output may appear the same for both. But each property is fundamentally different.

Further reading:

• 3. Scrollable Overflow: the overflow-x, overflow-y, and overflow properties
• What is a clearfix?
• What methods of ‘clearfix’ can I use?

CSS overflow:hidden with floats

I try to end the confusion:

ul is a block-level element as is the p element (they stretch to 100% of the parent width). That is why per default the p will appear below the ul if no width or display is declared on those elements.

Now in your example the ul contains only floated elements. This makes it collapse to a height of 0px (It still has 100% width though as you can see in the example). The adjacent p will appear to the right of the floated lis because they are considered as normal floated elements.

Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the ul contains its children. Suddenly the ul "reappears", not having size 0px anymore. The p is getting pushed to the bottom. You could also declare position:absolute to achieve the same "clearing" effect (with the side effect that now the ul is taken out of the normal element flow - the ps will be overlapped by the ul.)

See the example fiddle

If you are into the technical stuff, compare the according paragraphs of the CSS spec:

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

and

§10.6.7 'Auto' heights for block formatting context roots. (Thanks to BoltClock for digging out the links).

ul{    list-style-type:none;    margin:0; padding:0;    background-color:#dddddd;    border:2px solid red;}li{    float:left;}a{    display:block;    width:60px;    background-color:#555;    color:white;}p{    margin:0;    outline:2px dotted blue;}#two{    clear:both;    overflow:hidden;}

No overflow:<ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul><p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats  </p><br>With overflow: hidden<ul id="two"><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul><p>the ul reappeared - it now contains the child li's - the float is cleared</p>

clear both or overflow hidden , a clearfix solution

overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.

Why does overflow hidden stop floating elements escaping their container?

It creates a block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning
and clearing of floats apply only to things within the same block
formatting context. Floats do not affect the layout of things in other
block formatting contexts, and clear only clears past floats in the
same block formatting context.

see also: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

CSS clear both inside children

you can also use overflow: hidden;

<div class="wrapper">
  <div class="float"></div>
  <div class="float"></div>
</div>

.wrapper{
 overflow: hidden;
}

.float{float: left;}

check demo on jsfiddle

clear:both or overflow:auto, which is better?

overflow: auto (or hidden) is not acceptable at least in cases where the container has a set height as this will engender a scrollbar (or hide the overflowing content).

http://jsfiddle.net/xSzcC/

Float clearing is intended to be done by the clear rule anyway.

Clear-fixing for modern browsers is very easy now.

http://jsfiddle.net/xSzcC/1/

In case of link rot, the functional part is:

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

.cf:after {
    clear:both;
}

What does the CSS rule clear: both do?

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

Live Example of the demo image.

Code For Demo

/*  CSS:  */
* { /* Not related to floats / clear both, used it for demo purpose only */    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}
header, footer {    border: 5px solid #000;    height: 100px;}
aside {    float: left;    width: 30%;    border: 5px solid #000;    height: 300px;}
section {    float: left;    width: 70%;    border: 5px solid #000;    height: 300px;}
.clear {    clear: both;}

<!-- HTML --><header>    Header</header><aside>    Aside (Floated Left)</aside><section>    Content (Floated Left, Can Be Floated To Right As Well)</section><!-- Clearing Floating Elements--><div class="clear"></div><footer>    Footer</footer>

---

Related Topics