清除浮动多种方法类比

方法一
父级设定固定高度。注:适用于高度固定时使用

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div> 
<div class="div2"> 
    div2 
</div>
.div1{
    background:#000080;
    border:1px solid red;
    width: 100%;
    /*解决代码*/
    height:200px;
}
.left{
    float:left;
    width:20%;
    height:100px;
    background:#DDD;
} 
.right{
    float:right;
    width:30%;
    height:100px;
    background:#DDD;
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px;
} 

方法二
在浮动结尾处添加空div,使用clear:both;清除掉浮动。注:页面浮动布局偏多,使用起来不够简洁

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
    <!-- 解决办法 --> 
    <div class="clearfix"></div>
</div> 
<div class="div2"> 
    div2 
</div>
.clearfix{
    clear: both;
}

方法三
父级添加伪类 after进行清除浮动,例如:display:block;clear:both;content:"";

.div1:after{
    display: block;
    clear: both;
    content: "";
}

方法四
父级添加样式 overflow:hidden; 或者 overflow:auto;貌似 overflow:overlay;也可以。
添加 overflow 属性后,浮动元素又回到了容器层,把容器高度撑起。

.div1{
    background:#000080;
    border:1px solid red;
    width: 100%;
    /*解决代码*/
    overflow: hidden;
} 

方法五
父级添加样式diaplay: table;

.div1{
    background:#000080;
    border:1px solid red;
    width: 100%;
    /*解决代码*/
    display: table;
} 
IT文库 » 清除浮动多种方法类比
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址