Question

我已经浮动了div，然后是非浮动的div。以下div忽略浮动div的高度。为了防止这种情况，缺少什么CSS命令？

HTML

<div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div>    
    <div class="bottom">bottom</div>

CSS

.wrap{    
    width: 400px;
    height: 350px;
    background-color: grey;
}

.left{
    width: 150px;
    height: 150px;
    background-color: blue;
    position : relative;
    float: left;
}


.right{
    width: 150px;
    height: 150px;
    background-color: red;
    position : relative;
    float: right;
}

.bottom{
    width: 200px;
    height: 100px;
    background-color: green;
    position : relative;
}

Answer 1

尝试添加一个清除重置浮动，如下所示：

<div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div>
    <div style="clear:both;"></div>
    <div class="bottom">bottom</div>

</div>

通常是在css中有一个名为clear的类的好方法，可以这样做：

.clear{
    clear:both;
}

并在div或br中使用它：

<div class="clear"></div>

或

<br class="clear" />

DEMO

Answer 2

你需要清除漂浮物。

HTML：

<div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clr"></div>
    <div class="bottom">bottom</div>        
</div>

CSS：

.clr{clear:both;}

Updated fiddle here.

前面的div是浮动和崩溃的

2 个答案: