CSS overflow:hidden with floats

css float
clear float
css-tricks floats
css float over
float overflow
css stop float
clearfix css
css float best practices

I read the following code on w3schools and do not understand how the overflow property would impact whether text appears to the right of the ul or not.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}
<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><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

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>

All About Floats, The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent  To prevent the comment from wrapping around the avatar just add overflow:hidden to the comment container. The advantage of using overflow here is that I don’t have to set a float or width to the comment container. The container automatically aligns after the floated avatar image..image { float: left; } .text { overflow: hidden; }

Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared.

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

CSS: Clearing Floats with Overflow, Using overflow:hidden will hide any content that exceeds the boundry of the container. Word-wrap. To solve the long unbreaking text issue,  Understanding CSS Overflow: hidden – Overflow, Collapse, Clear Float Time:2019-7-26 Overflow: hidden is a magical use of overflow attributes, which can help us hide overflow elements, remove floats and remove collapse s.

This is why w3schools is not a reliable source for web designer/developers. You are correct, it is a terrible example.

It doesn't because, in this example, the parent element does not have a fixed with. Furthermore, it's an un-ordered list tag, which is going to stretch to the size of it's children regardless.

http://jsfiddle.net/EhphH/

CSS

.parent {
    width: 150px;
    height: 100px;
    padding: 10px;
    background: yellow;
    overflow: hidden;

}
.child {
    float: left;
    width: 75px;
    height: 120px;
    margin: 10px;
    background: blue;

}
.baby {
    width: 200px;
    height: 25px;
    background: green;
}

Markup

<div class="parent">
    <div class="child">
        <div class="baby">
        </div>
    </div>
    <div class="child">
    </div>
</div>

Use "overflow: hidden" to avoid floating elements from wrapping a , If you want the actions element to float on the left, you'd just say this in your CSS: The reason behind this is that " overflow: hidden " will give you a new block  The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require additional elements.

To quote from HTML & CSS Is Hard

To summarize, when you have an extra unfloated HTML element at the bottom of a container div, use the clear solution. Otherwise, add an overflow: hidden declaration to the container element. The underlying idea for both options is that you need a way to tell the browser to incorporate floats into the height of their container element

Why do we use overflow, hidden with float in CSS?, In css overflow ,hidden , float are very important for designing a response web pages Float can act as two ways 1. Float: none 2. Float: left( it  The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. Note: The overflow property only works for block elements with a specified height.

Instead of the overflow:hidden; use clear:both; for the <p>. here it is in use http://jsfiddle.net/Mvv8w/. Basically overflow:hidden will clear anything that is aside it just as clear:both; does.

The Mystery Of The CSS Float Property, Without the CSS float property, table-less layouts would be, at worst, issue is to add overflow: hidden or overflow: auto to the parent element. The float Property. The float property is used for positioning and formatting content e.g. let an image float left to the text in a container. The float property can have one of the following values: left - The element floats to the left of its container; right - The element floats to the right of its container

The Power of CSS overflow: hidden;, Read about the CSS property overflow: hidden; and how it can help you Sure, you may know that a float will push some content/image to the  Use overflow: hidden instead.-moz-scrollbars-horizontal Use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead.-moz-scrollbars-vertical Use overflow-x: hidden and overflow-y: scroll, or overflow: scroll hidden instead.-moz-hidden-unscrollable Intended mainly for internal use and by themes.

Understanding CSS Overflow: hidden – Overflow, Collapse, Clear , Use overflow: hidden to clear floats When we try to add a CSS attribute to the parent div: float: right, we find that two color blocks appear on  [Floats and “clear”] How to clear CSS floats without extra markup - different techniques explained. There are three major approaches: a) Floating the containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS pseudo-class. A test-page for techniques.

Overflow:auto/hidden as clear:both? - HTML & CSS, With that child float hanging out it was just interacting with the other two floats the way it normally would. Also, the overflow: hidden; on your floated .bottom divs is  The “clear” Property. MDN defines clear like this:. The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

Comments
  • +1 finally an even better answer ;) Note that the reason why ul has zero height when its children are floated is because parent height calculation ignores floats since they're not in normal flow if the parent does not create a BFC for them. Compare §10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' with §10.6.7 'Auto' heights for block formatting context roots
  • @BoltClock Excellent, I was looking for these paragraphs. Thanks for sharing! I will add those to the answer.
  • Lighten up before you have a stroke. Angry is no way to live.
  • Hehe, I'm not angry at all. I'm amused how certain people can be about their wrong opinion. You should take a deeper look at my example fiddle and meditate some hours about it.
  • @tPlummer: "Lighten up before you have a stroke. Angry is no way to live." Speak for yourself. Anyway, because jsFiddle has been down for me all afternoon, I'm going to assume that what you've added in is fact the same code that's in your link - although given your position on this it still seems a bit dubious.
  • @BoltClock: "I read the following code on w3schools and do not see how is it that the overflow property has such an effect as to weather text appears to the right of the "ul" or not."...then..."I know that the overflow:hidden etc. is use to handle content the goes outside of the box but, don't see how this happens in this simple example." I answered the question the OP asked and provided an example.. The resource he was using is known to be unreliable. Everything that came afterwards all extended from my colorful take on Christoph's need to critique beyond what was necessary. Apologies.
  • That's not the same. Take a look at your modified example
  • i didn't say they were the same?. i just said that it will clear elements aside it. So there was no need for the negative rating.
  • 1) I didn't downvote. 2) As you can see from the fiddle I posted the overflow in this example is used to make the parent element contain the floated child elements. I put background-color on the ul to make it clear: the second ul expands to contain it's floated children while the float in the first list are cleared too, but the ul fails to contain it's floated child li and thus has height 0 = no backgroundcolor.