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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

不言

Oct 29, 2018 pm 12:01 PM

この記事では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でオーバーフローをクリアするにはどうすればよいですか?オーバーフロー:フロートをクリアする非表示の例