CODEWITHSUNDEEP
cssoverflow
Sung Qee
Sung Qee

Reputation: 345

Some confusions about css overflow

Recently I am learning some stuff about CSS,I found some awesome tricks about overflow:

  1. Set parents of float elements to overflow:hidden or overflow:auto can keep parents from collapsing

    <div style="overflow: auto;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

  2. make two columns have same height,set a big enough padding at the bottomof each floated element, and countering it with an equal negative margin at the bottom of the same elements. The trick is to set the overflow on the parent container to hidden

I can not image how it work,why is overflow so obscure? someone can explain it?

Upvotes: 2

Views: 40

Answers (1)

kaosmos
kaosmos

Reputation: 558

The clearfix behavior you describe in 1 is a well known properties of overflow as you can see here: https://css-tricks.com/almanac/properties/o/overflow/#article-header-id-6 and http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ and this is an expected behavior, since it is part of the CSS 2.1 spec: https://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#root-height (see the last sentence of the 10.6.7 'Auto' heights for block formatting context roots paragraph)

The 2 is (as @alohci says in the comment) the overflow: hidden expected behavior.

For further details you can read the official spec: https://www.w3.org/TR/CSS22/visufx.html#overflow

Upvotes: 1

Related Questions