0

Why does the overflow property make a difference in how the elements are laid out in the following sample.

I heard that this happens because when we specify overflow with a value other than visible, it will clear the floats. I am wondering if we can recreate the behavior using clear property (without using overflow).

Another thing I noticed was: if I do not specify overflow for aside, but change its display to inline-block, again, it appears different. What is the difference between display: block and display: inline-block w.r.to previously laid out float elements? does inline-block also clear the floats? thanks.


<html>
<head>
<title>Page Title</title>
<style>
section, aside, footer { border: 1px solid black;}
section {
    width: 50%;
    height: 50px;
    float: left;
}
aside {
    width: 30%;
    height: 50px;
    display: block;
    overflow: hidden;  /* comment this and see what happens */
}
footer {
    width: 10%;
    height: 50px;
}
</style>
</head>
<body>
  <section>Section 1</section>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>
</html>
user7001304
  • 11
  • 3
  • Because when you use CSS `float`, it causes the child nodes in the element to be taken out of the document flow. Setting `overflow: hidden` forces the parent to clear the float. It's the good old trick of float clearing. – Terry Feb 19 '21 at 15:06
  • Setting `overflow` creates a new block formatting context which has the side effect of clearing the floats - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context – Paulie_D Feb 19 '21 at 15:08
  • Thanks for saying that it clears the floats. Can you recreate the behavior of overflow with a clear property specification? Thanks. – user7001304 Feb 19 '21 at 15:18

0 Answers0