...
All geek questions in one place

When should I use: hidden overflow for <div>?

Suppose I have this HTML structure:

<div class="a">
 <div class="floated-left">...</div>
 <div class="floated-left">...</div>
</div>

I noticed that if I do not set overflow:hiddento .a, then it <div class="a">does not occupy any vertical size. For example, if I set my background to red, it does not appear at all. Examining it with FireBug shows that it is there, but almost has no vertical size.

To fix this, I found that I need to install overflow:hiddenin .a. Then the first <div>looks through all its contents.

Here is a real example:

<html>
<head>
  <style>
    .a { background-color: red; }
    .b { background-color: red; overflow: hidden }
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
  </style>
</head>

<body>
  <p>div with class a, that doesn't overflow:hidden:</p>
  <div class="a">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Mom!</div>
  </div>

  <div style="clear:both"></div>

  <p>div with class b, that does overflow:hidden:</p>
  <div class="b">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Dad!</div>
  </div>
</body>
</html>

Note that it Hi, Mom!does not receive a red background (without overflow: hidden), but Hi, Dad!receives a red background (has overflow: hidden).

Can anyone explain this behavior?

Here is a screenshot of the example:

http://imgur.com/O8qvP

, .

+3
4

, . , , ( , ). , , .

, , . , , , CSS, , . , css. , , . IE < 6 , , .

+3

Hi, Mom , div a, 0 ( 0). divs ( ).

, float, , ( ). . , overflow: hidden div . . - , div, .. div.

+1

, , :

<div class="a">
  <div class="floated-left">Hi,</div>
  <div class="floated-left">Mom!</div>
  <br style="clear: left;" />
</div>

, div . border: solid 1px red; .a, .

CSS:

.a:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
0

CSS:

. " .

"" , , b div , . ( b, , divs .

http://www.w3.org/TR/css3-box/ (RE: X)

0
source

Source: https://habr.com/ru/post/1730629/

More articles:


All Articles