子类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>

 

posted on 2015-11-16 21:16  StartIT  阅读(657)  评论(0编辑  收藏  举报