点击小箭头阅读更舒适 如果觉得卡顿,请点击小眼睛关闭蜘蛛网特效

前端之消除浮动

《前端之消除浮动》

我们有时候会遇到当父盒子没有定义高度,其中嵌套的盒子浮动之后,下边的元素发生位置错误的情况。即:

<body>
        <div class="header"></div>
        <div class="main">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
</body>
.header,.main,.footer{
    width:500px;
}

.header{
    height:100px;
    background:#bf4630;
}

.main{      /*没有main盒子设置高度*/
    background:#eee;
    margin:10px 0;
}

.right{
    width:300px;
    background:#ff2800;   
    height:300px;
    float:left;
}

.left{
    width:190px;
    background:#ff5d40;
    height:300px;
    float:right;
}

.footer{
    height:100px;
    background:#bf4630;
}

这种情况最后会使得footer盒子向上移动被覆盖在main盒子的下面。所以我们往往需要通过clear这个属性来消除浮动带来的不利影响。

1、额外标签法—即在最后一个浮动元素后添加标签,我理解的是就是添加一个元素将footer盒子隔离开来。

<div class="header"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <!--额外标签法-->
        <div style="clear:both;"></div>
    </div>
<div class="footer"></div>

2、给父级元素使用overflow:hidden;,但是这个方法也有他固有的弊端,就是如果有内容超出了盒子,会使得超出的部分隐藏起来,所以这个方法只能在内容在盒子内部的时候使用。

.main{
    background:#eee;
    margin:10px 0;
    overflow:hidden;  /*一定要注意是给父级元素使用该方法*/
}

以上的两种方法都能解决问题,但是都有其弊端,我们最推荐的是下面这一种。

3、伪元素清除浮动

.clearfix:after{
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
    clear:both;
}
/*兼容IE浏览器*/
.clearfix{
    zoom:1;
}
<body>
    <div class="header"></div>
    <div class="main clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>

它的好处就是写一次即可,之后可以无限调用,弥补了第一个方法的不足。

《前端之消除浮动》

  点赞
本篇文章采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
转载请务必注明来源: https://oldpan.me/archives/frony-end-move-shake

   欢迎关注Oldpan博客微信公众号,同步更新博客深度学习文章。


发表评论

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

评论审核已启用。您的评论可能需要一段时间后才能被显示。