CSS overflow:hiddenの解除・打ち消す方法

「overflow:hiddenを使うとfloatの回り込みを解除できると聞いたけどclear:bothとどう違うの？」

「overflow:hiddenそのものを解除したいのだが、初期値なんだっけ？」

floatの回り込みを解除するためのoverflow:hiddenについてと、

「overflow:hidden」そのものの解除について解説します。

floatの回り込みを解除

floatは要素を回り込みさせるCSSです。横並べする際によく使います。

floatの回り込みを解除しないと次の要素まで回り込みされて崩れてしまいます。

下記は回り込みを解除しておらず崩れてしまった例です。

<style>
.example,.example2,.example3{
    border: 1px solid #999;
    padding: 15px;
    box-sizing: border-box;
}
.example{
    float: left;
    width: 50%;
    height: 100px;
    background: #d6e4ff
}
.example2{
    float: left;
    width: 50%;
    height: 70px;
    background: #fcc3c3;
}
.example3{
    background: #bae6ad;
    margin-top: 15px;
}
</style>

<div class="example">左</div>
<div class="example2">右</div>
<div class="example3">下</div>

floatの回り込みを解除し、崩れない方法を解説します。

overflow:hiddenで解除

floatで横並べした要素をdivなどで囲み、これにoverflow:hiddenを指定するとそれ以降の回り込みを解除できます。

<style>
.example4{
    overflow: hidden;
}
.example,.example2,.example3{
    border: 1px solid #999;
    padding: 15px;
    box-sizing: border-box;
}
.example{
    float: left;
    width: 50%;
    height: 100px;
    background: #d6e4ff
}
.example2{
    float: left;
    width: 50%;
    height: 70px;
    background: #fcc3c3;
}
.example3{
    background: #bae6ad;
    margin-top: 15px;
}
</style>
<div class="example4">
    <div class="example">左</div>
    <div class="example2">右</div>
</div>
<div class="example3">下</div>

メリット

ムダなhtmlがなく構造がキレイ

デメリット

overflow:hidden本来の能力である「はみ出した要素を隠す」機能も働くため、意図的にはみ出す要素を含む場合使えない

clear:bothで解除

最後のfloatの次の兄弟要素にclear:bothを指定すると回り込みを解除できます。

<style>
.clear{
    clear: both;
}
.example,.example2,.example3{
    border: 1px solid #999;
    padding: 15px;
    box-sizing: border-box;
}
.example{
    float: left;
    width: 50%;
    height: 100px;
    background: #d6e4ff
}
.example2{
    float: left;
    width: 50%;
    height: 70px;
    background: #fcc3c3;
}
.example3{
    background: #bae6ad;
    margin-top: 15px;
}
</style>
<div class="example">左</div>
<div class="example2">右</div>
<div class="clear"></div>
<div class="example3">下</div>

メリット

はみ出した要素がある場合でも使える。

デメリット

「clear:both」を指定するためだけのhtmlを置く場合、構造として美しくない。

floatの特性上clear:bothを指定した要素（floatの直後の弟要素）のmargin-topが効かない。

そもそもfloatを使わない

横並べのためにfloatを使っているなら、floatではなくdisplay:flexを使うことをオススメします。

display:flexを使えば、崩れや回り込みの解除に頭を悩ませることはなくなります。

overflow:hiddenそのものを解除

「overflow:hiddenを解除し初期状態に戻したい」という場合について解説します。

overflow:visibleで解除

overflowの初期値はvisibleです。

autoを指定するとスクロールバーが出てくるので間違えないようにしましょう。

overflow:initialで解除

「initial」はすべてのCSSに指定できる値で、そのCSSを解除・初期値にする値です。

ただし、IEではinitialが効きません。

IEを無視できる場合に利用しましょう。

まとめ

floatの回り込みを解除

• overflow:hiddenで解除
  オススメ
• clear:bothで解除
  overflow:hiddenだと隠れてしまう要素がある場合はこちら

overflow:hiddenそのものを解除

• overflow:visible（初期値）
• overflow:initial（解除）

以上、overflow:hiddenの解除・打ち消す方法について解説しました。