子类div不在父类div中，需清楚浮动， 清除浮动的两种方法

1. overfloat: hidden

css代码：

<style type="text/css">
#box {
    border: 10px solid #616161;
    overflow: hidden;         /* overflow: hidden add to parent can clear float*/
}

#content {
    float: right;
    width: 600px;
    height: 600px;
    border: 5px solid #400000;
    width: 600px;
}
</style>

 

HTML，div代码：

<div id="box">
        <div id="content"></div>
</div>

 

2. clear: both

css代码：

<style type="text/css">
#box {
    border: 10px solid #616161;
}

#content {
    float: right;
    width: 600px;
    height: 600px;
    border: 5px solid #400000;
    width: 600px;
}

.clearb {
    clear: both; /*clear: both add to the last sibling can clear float*/
}
</style>

HTML，div代码：

<div id="box">
        <div id="content"></div>

          <div class="clearb"></div>
</div>

 

转载于:https://www.cnblogs.com/Super0206/p/4970090.html