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

浅浅的花香味﹌ 2022-09-25 02:22 108阅读 0赞

## 什么是浮动？ ##

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

**浮动的好处**：

*  在图片周围包含文字  
    ![在图片周围包含文字][20160805101428135]
 *  创建网页布局  
    ![创建网页布局][20160805100245613]
    
    **浮动的缺点**：
 *  无法撑起父元素。
 *  同级别的兄弟元素会围绕在周围。

--------------------

## 清除浮动 ##

这是一个浮动的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>

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

在解决浮动元素产生的问题中有很多方法，但是也有一些方法解决了问题以后又产生了新的问题，得不偿失，我一般使用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>

优点：结构和语义正确，没有多余的标签，一般不会产生新的问题。  
缺点：复用方式不当会造成代码量增多。

[20160805101428135]: /images/20220719/776bbd2f678e4b9da3b0126a09659141.png
[20160805100245613]: /images/20220719/065eec3fd0a34329bce3e384e0154b59.png
[20160805102930235]: /images/20220719/327bbf6c6abe40b08189f0f2af20162a.png