Question

               .block    
               {
                width:540px;
                margin:20px;
                padding:10px;
                border:1px solid Gray;
               }

              <div id="header" class="block">
                <div id="pe" class="text">
                  <b>Name :</b> <span>King</span><br />
                  <b>Surname :</b> <span>Kong</span>
                </div>
                <div id="area" class="text">
                  <span id="city">Abcs</span><b>/</b>
                  <span id="state">Bcsdf</span>
                </div>
              </div>

如果您在Jsfiddle中运行上述代码，则会显示border around the text和the important thing is that height of the block class is auto，因此会自动调整其高度。

但问题来自我添加以下css：

 #pe
 {
  float:left;
 }
 #area
 {
   float:right;
 }

现在div.block的高度未自动设置。谁能告诉我这个问题？

Answer 1

添加浮动：左;在您的块类中。

Answer 2

因为float将它们从当前流中取出。它们不在块div中，就像它们在哪里一样，使用定位和显示：内联使它们按照你想要的方式排列

Answer 3

您可以使用绝对定位，其中外部元素设置为height：auto，内部#pe和#area设置为height：100％。

看一下这个答案：How to make a floated div 100% height of its parent?

Answer 4

那是因为它们不再是文件共同流程的一部分了。

解决方案可以是在块类中设置display: block，然后使用position: absolute使用left: 0和right: 0

将元素放置在该块中

Answer 5

只需将overflow：hidden添加到类“block”。

 .block{
   width:540px;
   margin:20px;
   padding:10px;
   border:1px solid Gray;
   overflow:hidden;
 }

这是小提琴：http://jsfiddle.net/rWuBF/

Answer 6

我会将overflow:hidden添加到包含元素（#header）。那应该解决它。

Answer 7

现在你需要一个Clearfix

.clearfix:after{
clear:both;
line-height:0;
height:0;
display:block;
background-color:transparent;
border:none;
content: ".";
visibility:hidden;
 }

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
 }

你像这样添加它

"<div id = "header" class="block clearfix"></div>"

Answer 8

虽然有点脏，但你也可以添加一些在浮动元素之后清除的东西。

<div id="header" class="block">
  <div id="pe" class="text"> ... </div>

  <div id="area" class="text"> ... </div>

  <div style="clear:both;"></div>
</div>

这也有更清晰的“clearfix”变体，可以让你清楚：两者都没有添加非语义标记。 http://www.positioniseverything.net/easyclearing.html

div元素的高度未自动设置

8 个答案: