清除浮动的4种方式

柔光的暖阳◎ 2022-12-26 00:53 171阅读 0赞

# 清除浮动的4种方式 #

### 为什么要清除浮动？ ###

###### 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 ######

##### 如下: #####

###### 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

###### 当我给内部两个盒子加上float属性的时候 ######

###### 底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]

### 清除浮动的方法（最常用的4种） ###

#### 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 ####

##### 优点： 通俗易懂，书写方便。（`不推荐使用`） #####

##### 缺点： 添加许多无意义的标签，结构化比较差。 #####

###### 给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可） ######

<div class="fahter">
            <div class="big">big</div>
            <div class="small">small</div>
            <div class="clear">额外标签法</div>
    </div>

.clear{ 
            clear:both;
        }

#### 二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 ####

###### 优点： 简单、代码少、浏览器支持好 ######

###### 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。 ######

.fahter{ 
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

###### 注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。） ######

#### 三、使用after伪元素清除浮动：`:after`方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（`较常用推荐`） ####

###### 优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） ######

###### 缺点： 由于IE6-7不支持：`:after`，使用`zoom：1` ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]

.clearfix:after{ /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .clearfix{ 
            *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
     
    <body>
        <div class="father clearfix">
            <div class="big">big</div>
            <div class="small">small</div>
            
        </div>
        <div class="footer"></div>
    </body>

###### 四、使用before和after双伪元素清除浮动：（`较常用推荐`） ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]

###### 优点： 代码更简洁 ######

#### 补充 ####

###### 父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 ######

###### 优点： 简单、代码少、容易掌握 ######

###### 缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 ######

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/4bf7104885de40c39e4a9b982422ee7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221120/1f35ed562c0047df9f899f5608be05cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]: /images/20221120/63825f554d454d23ab793eab2e6b5151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]: /images/20221120/2d81548b3fb14da1823e9d1afe1352af.png