浮动以及清除浮动

悠悠 2022-10-22 15:47 267阅读 0赞

### 文章目录 ###

*  浮动
 *   *  浮动特征
     *   *  浮动会脱离文档
         *  浮动可以内联排列
         *  浮动会导致父元素高度坍塌
 *  清除浮动
 *   *  clear清除浮动
     *  BFC清除浮动
     *   *  BFC的主要特征
     *  BFC的触发方式

# 浮动 #

浮动核心就一句话： **浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。**

## 浮动特征 ##

### 浮动会脱离文档 ###

脱离文档，也就是说浮动不会影响普通元素的布局

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

从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

### 浮动可以内联排列 ###

浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。

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

从上图可以看出，对多个元素设置浮动，可以实现类似inline-block的效果；但是如果每个元素的高度不一致，会出现“卡住”的情况。

### 浮动会导致父元素高度坍塌 ###

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

// css
     .box-wrapper {
            border: 5px solid red;    
    }
      .box-wrapper .box {
            float: left; 
            width: 100px; 
            height: 100px; 
            margin: 20px; 
            background-color: green;    
    }
    
    // html
        <div class="box-wrapper">    
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        </div>

结果如下，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

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

# 清除浮动 #

*  clear清除浮动
 *  BFC清除浮动

## clear清除浮动 ##

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，  
**底层原理:** 在被清除浮动的元素上边或者下边添加足够的清除空间

**注意**：我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。

//clear清除浮动例子
        <div class="box-wrapper">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div style="clear:both;"></div>
        </div>

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

**不要在浮动元素上清除浮动**

//第三个元素加上clear:both
        <div class="box-wrapper">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box" style="clear:both;"></div>
        </div>

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

**注意**：给第三个元素加上clear:both之后，第三个元素的左右都没有挨着浮动元素，但是为什么高度还是坍塌了呢？机智的你可能发现了，由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。

// 现代浏览器clearfix方案，不支持IE6/7
        .clearfix:after {
            display: table;
            content: " ";
            clear: both;
        }
    
    // 全浏览器通用的clearfix方案
    // 引入了zoom以支持IE6/7
        .clearfix:after {
            display: table;
            content: " ";
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }
    
    // 全浏览器通用的clearfix方案【推荐】
    // 引入了zoom以支持IE6/7
    // 同时加入:before以解决现代浏览器上边距折叠的问题
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: " ";
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }

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

## BFC清除浮动 ##

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

### BFC的主要特征 ###

*  BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
 *  BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

## BFC的触发方式 ##

我们可以给父元素添加以下属性来触发BFC：

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/114946607][https_blog.csdn.net_qq_39903567_article_details_114946607]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/f922529a20da479b96d521fbdf8e3b88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/a18d4da4453848f29a23b658ad856313.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/8984c18495984f97b339b9ab031ee9f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/974a6e893ead4ce6893d68baf53fd3e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221022/e02e0efcce8543999d7ea7d88543ca0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221022/38f8580c54684b59a7fbffe11cbbe1a6.png
[https_blog.csdn.net_qq_39903567_article_details_114946607]: https://blog.csdn.net/qq_39903567/article/details/114946607