Css Overflow:Hidden With Floats

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>

Why does 'overflow: auto' clear floats? And why are clear floats needed?

The reason why the wrapper doesn't stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won't have any height.

Note that overflow: auto doesn't clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.¹ That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

¹ _{OK, maybe "just" wasn't exactly the best adverb to use.}

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

how does the overflow:hidden; works with float

overflow: hidden; only has a visible effect if you define width and height for that element and its contents would normally go beyond that width and height:

(widthhas a default of 100%, so it doesn't necessarily have to be defined in all situations)

.parent{
    background-color: red;
    padding: 10px;
    overflow: hidden;
    width: 200px;
    height: 15px;    
}
.parent div{
    background-color: #eee;
    float: left;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/float.css">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
    </div>
    <p>this is a paragraph</p>
</body>
</html>

How to make text overflow with floats

Solution #1: With flexbox

1) On the container element: Add display: flex; and white-space: nowrap;

2) On the right element: Add flex:1 for it to grow to take up the remaining space.

.container{  width:100%;  display: flex;  white-space: nowrap;}.left{  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  border: 1px solid red; /* uncomment to see what's going on */}.right{  flex: 1;  border: 1px solid red; /* uncomment to see what's going on */}

<div class="container"><span class="left">left text</span><div class="right"> Testing text Testing text Testing text Testing text  </div> </div></div>

Overflow:hidden in float. Does it hide anything?

As its name suggests, overflow:hidden hides any content that overflows the element (i.e. excesses the given dimensions). In this example there is no overflow actually, so nothing is hidden. But the side-effect of setting the overflow other than visible (as well as display: inline-block, float itself etc.) is the change of the behavior of the block. While the normal block effectively doesn't take floats into account at all (only its text content does), the block that establishes new block formatting context (see Adrift's answer) isolates all of its content inside, including nested floats, potentially collapsible margins etc.

This side effect may be used to prevent the container of floats from collapsing, but it doesn't have anything to do with clearing floats. Clearing and BFCs act very differently in case of collapsible margins, other floats earlier in the document, etc.

In CSS, how does overflow interact with float?

You need to consider the concept of Block formatting contexts where you can read the following:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

So when adding overflow:hidden, the div2 will establish a new BFC then we can read:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space ^ref

To make it easy, when an element create a BFC its content will no more interact with the outside world. From the MDN you can read:

Setting overflow: auto created a new BFC containing the float. Our <div> now becomes a mini-layout inside our layout. Any child element will be contained inside it.

overflow:hidden / float property

It's because overflow: hidden; creates a new 'block context', see this StackOverflow article on a similar issue.

What I propose is if you're flexible in the way you position those elements, try to remove float: left; in .float-unit and add display: flex; to .float-frame as the float style is not meant to position block elements.

Css Overflow:Hidden With Floats