浮动的优缺点，如何清除浮动？

最新推荐文章于 2024-07-08 14:25:11 发布

旗smile

最新推荐文章于 2024-07-08 14:25:11 发布

阅读量3k

点赞数 3

分类专栏： web前端文章标签： css浮动

本文链接：https://blog.csdn.net/u014346301/article/details/52126858

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

什么是浮动？

元素浮动以后可以想做或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

浮动的好处：

在图片周围包含文字
创建网页布局

浮动的缺点：
无法撑起父元素。
同级别的兄弟元素会围绕在周围。

清除浮动

这是一个浮动的demo：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style>
.parent{
    background:rgba(244,130,132,1.00);
    border:1px solid rgba(201,197,197,1.00);
}
.f{
    float:left;
    background:rgba(113,229,239,1.00);
    border:1px solid rgba(0,0,0,1.00);  
    width:100px;
    height:100px;
}
</style>
</head>
<body>
<div class="parent">
    <div class="f"></div>
</div>
</body>
</html>

如图：
-元素浮动在左侧，父元素没有被撑起来。

在解决浮动元素产生的问题中有很多方法，但是也有一些方法解决了问题以后又产生了新的问题，得不偿失，我一般使用after伪元素来清楚浮动，不会产生别的问题。

1.添加额外标签清除浮动。

<div class="parent">
    <div class="f"></div>
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
</div>

优点：通俗易懂，容易掌握。
缺点：添加了无意义的空标签，后期不好维护。

2.添加<br>标签，使用<br>标签本身的的clear属性

<div class="parent">
    <div class="f"></div>
    //使用br标签本身的clear属性
    <br clear="all">
</div>

优点：通俗易懂，容易掌握。
缺点：添加了无意义的空标签，后期不好维护。

3.父元素设置overflow:hidden

<div class="parent" style="overflow:hidden">
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>

优点：代码量少。
缺点：内容较多时不换行的文件会被隐藏，无法显示溢出元素。不推荐使用。

4.父元素设置overflow:auto

<div class="parent" style="overflow:hidden">
    //将父元素的overflow设置为auto
    <div class="f"></div>
</div>

优点：代码量少。
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条。不推荐使用。

5.父元素也设置成浮动元素

<div class="parent" style="float:left">
    //将父元素也设置成浮动元素
    <div class="f"></div>
</div>

优点：代码量少
缺点：又产生了新的浮动问题，影响了和父元素同级别元素的布局。不推荐使用。

6.父元素设置display:table

<div class="parent" style="display:table">
    //将父元素设置display:table
    <div class="f"></div>
</div>

优点：代码量少。
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用。

7.使用伪元素:after（推荐使用）

//在css中添加:after伪元素
.parent:after{
    content:"";
    visibility:hidden;
    display:block;
    width:100%;
    height:0;
    clear:both;
}

<div class="parent">
    <div class="f"></div>
</div>