Heim > Artikel > Web-Frontend > CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法_html/css_WEB-ITnose
CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:211202Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：详解 CSS 属性Nächster Artikel：iOS Core Animation详解（四）AutoLayout中的动画_html/css_WEB-ITnose