ホームページ > 記事 > ウェブフロントエンド > 子要素にfloat属性を設定すると親要素の高さが0になる場合のCSS解説と解決策_html/css_WEB-ITnose
子要素にfloat属性を設定すると親要素の高さが0になる場合のCSS解説と解決策_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:211200ブラウズ
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>test1</title> 6 <style type="text/css"> 7 #container { 8 background-color: #f1f1f1; 9 width: 80%;10 margin: 20px auto;11 }12 .item {13 float: left;14 color: white;15 text-shadow:0 1px black;16 margin: 10px 20px;17 padding: 20px;18 }19 #container > .item:nth-child(1) {20 background-color: #F00080;21 }22 #container > .item:nth-child(2) {23 background-color: #D8AAD8;24 }25 #container > .item:nth-child(3) {26 background-color: #A2aa5A;27 }28 #container > .item:nth-child(4) {29 background-color: #63B8FF;30 }31 </style>32 </head>33 <body>34 <div id="container">35 <div class="item">36 No.137 </div>38 <div class="item">39 No.240 </div>41 <div class="item">42 No.343 </div>44 <div class="item">45 INo.446 </div>47 </div>48 </body>49 </html> コードの実行結果:
親要素には高さがまったくないことがわかりました (要素を確認すると、親要素の高さは div#container=0 であることがわかります)
分析:
floating float この属性により、要素は現在の HTML ドキュメントのフローから抜け出すため、現在の HTML ドキュメントは float 属性を持つ要素が存在しないかのように扱われます。すると、この5つの子要素は全てfloatに設定されているので、親要素#containerには中身が無いとみなして、中身が無い場合は、divはまさにheight = 0として動作します。 :
1. 親要素の float を設定します。例:
1 #container {2 background-color: #f1f1f1;3 width: 80%;4 margin: 20px auto;5 float: right;6 } 2. float に設定されている最後の子要素の後に空の div を追加し、この div の float をクリアします。
例:
1 <div class="items"></div> 2 .items {clear: both;} 3. 親要素は、overflow:hidden;
を設定します。 4. float を使用せず、次の子要素を使用します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSプロパティの詳しい説明次の記事：CSSプロパティの詳しい説明