Question

为什么我的父母认为“爸爸”没有接受孩子的身高？ http://jsfiddle.net/MeHyJ/

<div id="dad">
    <div class="float">1</div>
    <div class="float">2</div>    
    <div class="float">3</div>      
    <div class="float">4</div>  
</div>

#dad {

height:100%;
width:100px;
border:1px solid black;
}
.float {
width:50px;
height:50px;
background-color:red;
float:left;
}

Answer 1

这是一个众所周知的浮动元素问题。您需要所谓的clearfix方法：http://css-tricks.com/snippets/css/clear-fix/

#dad:after {
  content: "";
  display: table;
  clear: both;
}

或创建一个稍后可以在代码中重用的类：

.clrfx:after {
  content: "";
  display: table;
  clear: both;
}

您更新的DEMO

Answer 2

请更改id #dad的css如下：

#dad {
float:left;
height:100%;
width:100px;
border:1px solid black;
}

Answer 3

使用display:inline-block而不是使用 float:left; clear:both;。

任务：找出显示：block / inline / inline-block;

之间的区别

DEMO＆amp; CODE

div与浮动元素的内容高度是100％？

3 个答案: