BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】overflow:hiddenの役割を解説（overflow hidden、clear float、外周マージンの崩れを解決する）。

2022-01-21 19:01:59

I. オーバーフロー:hidden オーバーフロー:hidden

ある要素に overflow:hidden を設定すると、その要素の内容が与えられた width と height 属性を超えた場合、超えた部分は占拠されないようになります。 

/*css styles*/
<style type="text/css">
    div{ width: 150px; height: 60px; background: skyblue;
	 overflow: hidden; /*overflow hidden*/
       }
</style>
 
/*html*/
<div style="">
    It's a beautiful day! <br> It's a beautiful day! <br>
    It's a beautiful day! <br> It's a beautiful day! <br>
</div>

その効果は次の通りです。

一般に、ページ内では通常、テキスト行が一定の幅を超えた場合など、オーバーフローの後にエリプシスを表示し、オーバーフローを非表示にして表示します。 

/*Only for single line of text*/
div{ 
    width: 150px;
    background: skyblue;
    overflow: hidden; /*overflow hidden*/
    white-space: nowrap; /* specifies that text does not make line breaks*/
    text-overflow: ellipsis; /* show omitted marker when text overflows inside object (...) */
}

その効果は次の通りです。

II. overflow:hidden クリアフロート

一般に、親要素に高さが設定されていない場合、コンテンツで高さを増やすことで適応させる。親要素の中の子要素を全てfloatにした場合、子要素は標準のフローから外れ、場所を占有せず、親要素は子要素の高さを検出せず、親要素の高さは0になります。 そこで、以下のような疑問が生じます。 

/*css styles*/
<style type="text/css">
    .box{ background:skyblue; }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
 
/*html*/
<body>
    <div class="box">
        <div class="kid kid1">child element 1</div>
	<div class="kid kid2">child element 2</div>
    </div>
    <div class="wrap">Other sections</div>
</body>

上記のように、親要素には高さがないため、その下の要素が上に来てしまい、ページが崩れてしまいます。そのため、親の高さを子コンテナや子コンテンツの高さに合わせて適応させるために、親にoverflow:hidden属性を追加する必要があります。次のようにします。

overflow:hiddenでは不可能なので、IEの下位バージョンでは、zoom:1を追加する必要があります。

ですから、より良い互換性のために、overflow:hidden を使用して float を消去する必要がある場合は、zoom:1 を追加するのがベストでしょう。 

/*css styles*/
<style type="text/css">
    .box{ background:skyblue; 
	  overflow: hidden; /*clear float*/
	  zoom:1;
        }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
 
/*html*/
<body>
    <div class="box">
        <div class="kid kid1">child element 1</div>
	<div class="kid kid2">child element 2</div>
    </div>
    <div class="wrap">Other sections</div>
</body>

III. overflow:hiddenで余白のつぶれを解消する

親要素の中に子要素がある場合、子要素にmargin-topスタイルを追加すると、親要素もそれに追従して、以下のように外側のマージンが崩れることがあります。 

/*css styles*/
<style type="text/css">
    .box{ background:skyblue;}
    .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
 
/*html*/
<body>
    <div class="box">
	<div class="kid">child element 1</div>
    </div>
</body>

そこで、親要素にoverflow:hiddenを追加することで問題を解決します。 

/*css styles*/
<style type="text/css">
    .box{ background:skyblue;
          overflow: hidden; /*resolve collapsed outer margins*/   
        }
    .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
 
/*html*/
<body>
    <div class="box">
	<div class="kid">child element 1</div>
    </div>
</body>

今回はoverflow:hiddenの役割（overflow hidden、clear float、外周余白の崩れを解消）について紹介します、overflow:hiddenの役割に関連する内容はスクリプトホームの過去記事を検索するか以下の関連記事を引き続きご覧ください、今後ともスクリプトホームをよろしくお願いします！(｀・ω・´)

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します