CSS3 непонимание свойства переполнения

Question

Я всегда думал, что изменение свойства элемента в стиле элемента будет только решить, что делать с контентом вне границ элемента, а не решать, находятся ли дети внутри или снаружи.

У меня есть этот код:

#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>

при изменении overflow от hidden к visible, в .left и .right дочерние элементы, как представляется, вне их родительского ящика, который, в отличие от если для свойства overflow установлено значение hidden. Почему недвижимость overflow ведет себя таким образом?

Answer 1

потому что вы используете float с, поэтому вам нужно очистить float сек

более

о clearing floats и float

Snippet с (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>

В этом фрагменте я использовал micro clearfix