清除浮动

清除浮动
1、浮动产生原因
由于子元素带有float属性导致。

<style>
#float-block{
    border: 4px solid green;
}
#left{
    float:left;
    width: 100px;
    height: 100px;
    background-color: red;
}
#right{
    float: right;
    width: 100px;
    height: 100px; 
    background-color: blue;
}
</style>
<div id="float-block">
    <div id="left">hello left</div>
    <div id="right">hello right</div> 
</div>

2、浮动现象
如下图所示:

父元素没有被正确撑开。
3、如何清除浮动
有如下3种方法
3.1、给父元素设置正确被撑开的宽、高度.

<style>
#float-block{
    border: 10px solid green;
    box-sizing: content-box;
    width:200px;
    height: 100px;
}
#left{
    float:left;
    width: 100px;
    height: 100px;
    background-color: red;
}
#right{
    float: right;
    width: 100px;
    height: 100px; 
    background-color: blue;
}
</style>
<div id="float-block">
    <div id="left">hello left</div>
    <div id="right">hello right</div>
</div>

3.2、父元素最后加入空的子元素,并加上clear:both;

<style>
#float-block{
    border: 10px solid green;
}
#left{
    float:left;
    width: 100px;
    height: 100px;
    background-color: red;
}
#right{
    float: right;
    width: 100px;
    height: 100px; 
    background-color: blue;
}
#delete-float{
    clear:both;
}
</style>
<div id="float-block">
    <div id="left">hello left</div>
    <div id="right">hello right</div>
    <div id="delete-float"></div>
</div>

3.3、使用伪元素::after

<style>
#float-block{
    border: 10px solid green;
}
#left{
    float:left;
    width: 100px;
    height: 100px;
    background-color: red;
}
#right{
    float: right;
    width: 100px;
    height: 100px; 
    background-color: blue;
}
#float-block::after{
    content: '';
    display: block;
    clear: both;
}
</style>
<div id="float-block">
    <div id="left">hello left</div>
    <div id="right">hello right</div>
</div>
此条目发表在未分类分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注