ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでオーバーフローをクリアするにはどうすればよいですか?オーバーフロー:フロートをクリアする非表示の例

CSSでオーバーフローをクリアするにはどうすればよいですか?オーバーフロー:フロートをクリアする非表示の例

不言
不言オリジナル
2018-10-29 12:01:574814ブラウズ

この記事ではCSSのoverflow:hidden属性でfloatをクリアする方法を紹介しますので、困っている方は参考にしてください。

前の記事で、CSS での overflow:hidden コンテンツのオーバーフローと非表示の効果について紹介しました。次の記事では、CSS の overflow:hidden 属性について説明します。クリアフロートを実装します。

まず第一に、フロートをクリアするということは、親要素がフローティング要素の高さを検出できるようにすることを意味し、それによって親要素をサポートすること、つまり、親要素の高さの崩壊の問題を解決することを意味することを知っておく必要があります。独自の高さがあるため、親要素が要素の背後にある要素が前方に埋め込まれるのを防ぎます。フロートをクリアすると、親要素の背後にある同じレベルの要素のレイアウトへの影響が解決されます。子要素の後ろは引き続き前方に埋められます。

具体的な例を見てみましょう

<html>
<head>
 <style type="text/css"> 
.parent{
 width:300px; 
 background:lightblue; 
 border:1px solid; 
} 
 .child1{
  width:100px; 
  height:100px; 
  background:pink; 
  float:left; 
} 
 .child2{
  width:200px; 
  height:50px; 
  background:red; 
}
</style> 
</head> 
<body> 
   <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
</html>

結果は次のとおりです:

CSSでオーバーフローをクリアするにはどうすればよいですか?オーバーフロー:フロートをクリアする非表示の例

上記のコードでは、親の高さを設定します。デフォルトの高さは自動ですが、親には高さが表示されます。また、ドキュメント フローの外にある child1 に float を設定しているため、親にはドキュメント フロー要素が 1 つだけ存在します。なので、親が引き伸ばされたときの高さは child2 の高さと同じになります。親に overflow:hidden 属性を設定します。その結果はどうなるでしょうか。特定のコードを見てみましょう

<html>
<head>
 <style type="text/css"> 
.parent{
 width:300px; 
 background:lightblue; 
 border:1px solid; 
 overflow: hidden;
} 
 .child1{
  width:100px; 
  height:100px; 
  background:pink; 
  float:left; 
} 
 .child2{
  width:200px; 
  height:50px; 
  background:red; 
}
</style> 
</head> 
<body> 
   <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
</html>

効果は次のとおりです。

CSSでオーバーフローをクリアするにはどうすればよいですか?オーバーフロー:フロートをクリアする非表示の例

上記のレンダリングから、「オーバーフロー」を親要素:hidden" を使用すると、ドキュメント フローの外にあるフローティング要素を親要素でラップさせることができます。つまり、"overflow:hidden" を使用すると、それを含むブロックのフローティング要素の影響をクリアできます。

この記事はここで終わります。さらに興味深い内容については、php 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !


以上がCSSでオーバーフローをクリアするにはどうすればよいですか?オーバーフロー:フロートをクリアする非表示の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。