html - 最小高度不适用于父级

Question

min-heightfloat:left在我将属性设置为它的子 div后，它不适用于父div。

你可以帮帮我吗 。

<style type="text/css">
*{ margin: 0 auto; padding: 0; }

 #wrapperd{
 width : 500px;
 border : 1px solid red;
 min-height:200px;
 }

 #test {
 border:2px solid blue; 
 width:600px; 
 float:left; 
 height:500px;

  }
 </style>

HTML 代码

 <div id = "wrapperd"> <!-- Parent Div -->
 <div id = "test"> </div> <!-- Child Div -->
 </div>

演示链接：- http://jsfiddle.net/rushijogle/cFX68/2/

提前感谢:)

Answer 1

经典清除修复问题：
1）将父级设置为溢出：隐藏；如上所述。唯一的问题是是否有任何内容会溢出父框。
2）我喜欢使用的另一个明确的修复技巧是：http ://nicolasgallagher.com/micro-clearfix-hack/我认为这与 Cherry 的评论相似......

Answer 2

你可以做两件事。一种是添加清除元素（与浮动元素一起clear: left或之后。clear: both

http://jsfiddle.net/ExplosionPIlls/cFX68/3/

另一种是添加overflow: hidden到父 div，它的作用是将 div 的高度“拉”下，使其包围更高的浮动 div。

http://jsfiddle.net/ExplosionPIlls/cFX68/4/

请注意，这对子 div的宽度没有任何影响。