overflow:hidden / float property

Question

I really cannot understand why the overflow:hidden makes the float property effect to be erased.

here`s the sources below which I'm having hard time with.

<div class="float-frame">
  <div class="float-unit">A</div>
  <div class="float-unit">B</div>
  <div class="float-unit">C</div>
  <div class="float-unit">D</div>
</div>    <!--html5 sources--!>

.float-frame {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  overflow:hidden;}

.float-unit {
  width: 50px;
  background: #333;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  float: left;        /* css3 sources */
  }

as you see, the existence of overflow:hidden property makes the view totally different from the case with which the property does not exist.

I learned that the overflow:hidden property is for making the content invisible when it overflows the box to which the content is belonged.

but why is that happening? I mean the overflow:hidden property makes the float effect erased..

I've searched a lot of articles.. but I couldn't get myself totally understood.

score 0 · Accepted Answer · edited May 23 '17 at 10:30

0

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.

edited May 23 '17 at 10:30

Community

1
1

answered Dec 20 '16 at 16:55

actc

672
1
9
23

yep thanks for your comment but i really wanna know why is that happening.. i mean i`m doubt with the role of the property overflow:hidden .. is that a kind of bug..? – jwkoo Dec 20 '16 at 17:00
I'm not sure what you mean. I created a jsfiddle with looks generally fine: https://jsfiddle.net/whhmqssx/ Does this one looks like yours? I'm not sure what do you mean by 'erased' ? – actc Dec 20 '16 at 17:08
yes.. thats right.. i mean 'erased' is that float property cleared. as you can see in jsfiddle.net/whhmqssx, the overflow:hidden property makes the float property cleared – jwkoo Dec 20 '16 at 17:23
so to make float-frame can wrap the .float-unit boxes – jwkoo Dec 20 '16 at 17:24
i learned that block-elements can`t notice the float elements, thats why the float-frame box cannot have proper height.. but if adding the overflow:hidden, the float property cleared, and .float-frame`s height back. so i wanna know why overflow:hidden property does that.. i`m sorry that my expression is so poor... i`m not American.. – jwkoo Dec 20 '16 at 17:28
I updated my answer with a link to a similar issue. Maybe that's helpful. – actc Dec 20 '16 at 17:40
Thank you so much it really does helpful – jwkoo Dec 20 '16 at 17:46
I m the first time in stackflow.. is that check sign mean that i accepted ur comments? – jwkoo Dec 20 '16 at 17:50
Stackflow says i cant vote your comments up because i have reputations less than 15. Thanks anyway – jwkoo Dec 20 '16 at 17:51

overflow:hidden / float property

1 Answers1