css overflow:hidden can prevent overlay

Question

Recently experiment with float and found overflow: hidden behaviour difficult to understand.

.child {
 width: 100px;
 height: 200px;
 background-color: #afe;
 overflow: hidden;
}

img.fl {
 float: left;
}

<img class="fl" src="./images/bdlogo.png">
<div class="child">
</div>

When there is "overflow: hidden" in child class, div child will not be overlayed by the picture floated. But if I delete "overflow:hidden", div child will be hidden by the floated picture.

Could you please [edit] the code in your question? The HTML appears to be incomplete (e. g. missing `<` but potentially more). — Sebastian Simon, Jun 29 '15 at 03:30
@Vera Lyu it seems that the HTML snippet you've included is broken. — Julian Paolo Dayag, Jun 29 '15 at 03:54

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

CSS overflow:hidden with floats

Plz visit this link and note down the last second answer which is the answer to your question. Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared. You can also visit http://jasonkinney.me/power-css-overflow-hidden/

edited May 23 '17 at 12:14

Community

1
1

answered Jun 29 '15 at 04:07

Amanjot Kaur

2,028
4
18
33

Amanjot, Thanks for your answer, so it is because overflow:hidden create a new BFC and BFC prevent its content from being overlay. – Vera Lyu Jun 30 '15 at 01:25

css overflow:hidden can prevent overlay

1 Answers1