how does the overflow:hidden; works with float

Question

Recently I started learning css and while I was learning about float I didn't understand how overflow:hidden; Works with the float I tried to go to w3schools and mdn But I still don't understand how it works

.parent{
    background-color: red;
    padding: 10px;
    overflow: hidden;
}
.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>

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats#using_overflow — CBroe, Nov 11 '21 at 10:15
Instead of using float you should check out css flexbox and css grid. — lupz, Nov 11 '21 at 10:24

score 0 · Answer 1 · answered Nov 11 '21 at 13:20

overflow: hidden; is a css property which prevent scrollbars from appearing, even if its necessary...

I will give an example using floats to show how it works,

HTML

<div class='container'>
  <div id="div1"></div>
  <div id="div2"></div>
</div>

CSS

/* *{
  overflow:hidden;
} */

.container{
  width:108vw;
  height:100vh;
  background:red;
}

#div1{
  width: 600px;
  height: 400px;
  background: blue;
  float: left;
}

#div2{
  width: 400px;
  height: 600px;
  background: green;
  float: right;
}

here, I purposely made the container larger than the screen size(which, obviously is 100vh, 100vw), so the scrollbars appear. Now i have two divs with floats and different colors so you can identify them. To actually see those divs, one must scroll down and towards the right;

Here is the link to the pen i made https://codepen.io/codebyrudra/pen/XWaBOJr

Now, uncomment the

*{
    overflow:hidden;
}

now you can see that the scroll bars are gone and you can no longer scroll to see those divs completely.

You can also try this property with display:flex; or display:grid;, it will yield the same result.

Hope this helped :)

score -1 · Accepted Answer · answered Nov 11 '21 at 13:47

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>

I suspect the OP is asking about its clearfix-like behaviour. — Alohci, Nov 11 '21 at 16:07

how does the overflow:hidden; works with float

2 Answers2