css布局中的BFC问题

一时失言乱红尘 2022-12-25 12:51 111阅读 0赞

# css布局中的BFC问题 #

### 1. 面试题—双边距（边距重叠） ###

###### 什么是边距重叠？ ######

###### 什么情况下会发生边距重叠？ ######

###### 如何解决边距重叠？ ######

###### 边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 ######

## 有两种边距重叠的情况： ##

###### 1. 父子关系的边距重叠 ######

> 父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

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

> 给父元素添加 overflow：hidden  
> 这样父元素就变为 BFC，不会随子元素产生外边距

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

### 2. 同级兄弟关系的重叠： ###

> 同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]

> 可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

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

### 2. 回答边距重叠—BFC ###

###### 什么是BFC？ ######

> BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

##### 如何触发BFC？ #####

###### 在box属性值为这些的情况下，都会让所属的box产生BFC。 ######

>  *  overflow: auto/ hidden;
>  *  position: absolute/ fixed;
>  *  float: left/ right;
>  *  display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

##### 也可以用排除法： #####

> overflow的值不是visible；  
> position的值不是static或relative  
> float的值不是none  
> display的值是inline-block 或 table-cell 或 flex 或 table-caption 或  
> inline-flex

##### BFC的原理？(面试可不说，但要理解) #####

###### 1、BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。 ######

###### 2、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。 ######

###### 3、BFC的区域不会与float重叠。 ######

###### 4、计算BFC的高度时，浮动元素也被计算在内。 ######

##### BFC的应用 #####

###### 1. 可以用来自适应布局 ######

> 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]

> 给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]

<section id="layout">
            <style media="screen">
              #layout{ 
                background: red;
                height: 200px;
              }
              #layout .left{ 
                float: left;
                width: 100px;
                height: 80px;
                background: blue;
              }
              #layout .right{ 
                height: 100px;
                background:green;
                overflow: hidden;
              }
            </style>
            <div class="left">left</div>
            <div class="right">right</div>
        </section>

##### 2. 可以清除浮动： #####

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

##### 父元素加overflow:hidden/auto,变BFC #####

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

<style>
            #out{ 
              background: red;
              border: 1px solid black;
              overflow: hidden;
            }
            #inner{ 
              float: left;
               width: 200px;
               height: 200px;
               background-color: blue;
            }
          </style>
        <div id="out">
            <div id="inner">我是浮动元素</div>
        </div>

#### 3. 解决垂直边距重叠： ####

###### 见上方案例 ######

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/18ae7edcb2974ea18ca25ae3a135abb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221120/9fe1b76e15b14f289238bdfd5bf30217.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201201213704799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201201213649224.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201201214029322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201201214051348.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201201214134635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201201214153631.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70