清除浮动的几种方法

最新推荐文章于 2021-11-21 10:35:06 发布

lifeblood123

最新推荐文章于 2021-11-21 10:35:06 发布

阅读量340

点赞数

分类专栏：前端技术 css 文章标签： float

本文链接：https://blog.csdn.net/lifeblood123/article/details/51816535

版权

前端技术同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

当元素浮动时，他将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行宽，产生文字环绕的效果。

浮动带来的影响：

1，父级的高度塌陷
2.背景不能显示
3.变框不能撑开
4.margin值不能正确显示
5.产生文字环绕的效果
6.由于脱离文档流，不占位，而后面的元素未脱离文档流导致后面的元素被挡住

下面我将会总结几种清除浮动的方法：
举一个简单的例子，我们找一张图片并让她向左浮动，代码如下：

<style>
    .box{
        background:gray;
    }
    .inner-box{
        float:left;
        width:100px;
        height:200px;
        background-color:red;
    }
</style>
<body>
    <div class="box fix">
       <div class="inner-box"></div>
       <div class="a"></div>
    </div>
</body>

接下来我们为她清除浮动：
*第一种方法：对父级设置适当的高度，只建议高度固定的布局使用。
代码省略；
*第二种方法：在结尾处加空div,利用css提高的clear:both清除浮动，让父级div自动获取到高度。
优点：简单代码少，浏览器支持好
缺点：如果页面浮动很多就会增加很多的空div,产生代码冗余，以前使用，现在不太推荐。
代码如下；

.a{
    clear:both;
  }

*第三种方式：父级div定义伪类after和zoom,原理与方法二类似，由于after只有IE8以上以及非IE浏览器才支持，zoom是IE专属，所以，为了实现更好的兼容性，需要两者结合使用。
优点：浏览器兼容性好
缺点：代码较多，建议定义公共类以减少css代码。
代码如下：

.fix:after{
    display:block; 
    content:"."; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.fix{
    zoom:1;
}

*第四种方式：父级定义overflow:hidden，相当于让父级紧贴内容（包括使用float的div的盒子），注意【必须要定义宽度width,zoom:1,同时不能定义height】
优点：简单，代码少，浏览器兼容性好
缺点：不能与position配合使用，因为超出的部分会隐藏

lifeblood123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录