CSS3 misunderstanding of overflow property

Question

I always thought that changing the overflow property of an element's style would only decide what to do with content outside an element's boundaries, not decide whether children are inside or outside.

I have this code:

#container {
  border: 2px solid red;
  overflow: hidden;
}
#container .left {
  width: 50%;
  float: left;
}
#container .right {
  width: 50%;
  float: right;
}

<div id="container">
  <h1>container text</h1>
  <div class="left">
    <h2>left text</h2>
  </div>
  <div class="right">
    <h2>right text</h2>
  </div>
</div>

when I change overflow from hidden to visible, the .left and .right child elements appear to be outside of their parent box which is in contrast to when the overflow property is set to hidden. Why is the overflow property behaving in this way?

I just answered a nearly identical question. It may be helpful to you. http://stackoverflow.com/questions/31622484/why-is-container-div-not-wrapping-the-child-divs-which-are-overflowing-the-cont — Michael Benjamin, Jul 26 '15 at 00:59

dippas · Accepted Answer · 2015-07-25T23:34:17.357

because you are using floats, therefore you need to clear the floats

more about clearing floats and float

Snippet with(overflow:visible):

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

.cf:after {
    clear: both;
}

#container {
  border: 2px solid red;
  overflow: visible;
}
#container .left {
  width: 50%;
  float: left;
}
#container .right {
  width: 50%;
  float: right;
}

<div id="container" class="cf">
  <h1>container text</h1>
  <div class="left">
    <h2>left text</h2>
  </div>
  <div class="right">
    <h2>right text</h2>
</div>
</div>

In this snippet I used a micro clearfix

CSS3 misunderstanding of overflow property

1 Answers1