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

html教程评论1.4K views阅读模式
 1  2  3  4  
  5  test1 6  32 33 34 
 
  35  
  
   36 No.137 
  38  
  
   39 No.240 
  41  
  
   42 No.343 
  44  
  
   45 INo.446 
  47 
 48 49 

代码运行结果:


我们发现父元素根本没有高度(审查元素可以看出父元素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 
   2 .items {clear: both;}

3、父元素设置overflow:hidden;

4、不要用浮动,而使用:子元素使用display:inline-table或者display:inline-block

企鹅博客
  • 本文由 发表于 2019年8月6日 16:24:13
  • 转载请务必保留本文链接:https://www.qieseo.com/368047.html

发表评论