CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:39:211188瀏覽
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）
分析:
浮动float属性会使得元素脱离当前HTML文档流，那么会使得：当前HTML文档会当作设置float属性的元素不存在一样。那么，由于这5个子元素都设置了float，所以可以看作父元素#container内根本没有内容，div在没内容的时候表现正好是高度=0.
解决方法：
1、设置父元素float
例如：
1 #container {2 background-color: #f1f1f1;3 width: 80%;4 margin: 20px auto;5 float: right;6 } 2、在最后一个设置浮动的子元素后加一个空div ，并且让这个div清除浮动。
例如：
1 <div class="items"></div> 2 .items {clear: both;} 3、父元素设置overflow:hidden;
4、不要用浮动，而使用：子元素使用display:inline-table或者display:inline-block
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn