Maison  >  Article  >  interface Web  >  CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法_html/css_WEB-ITnose

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:39:211187parcourir

 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

 

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn