BFC的定义和作用

红太狼 2022-08-31 15:17 126阅读 0赞

# BFC的定义和作用 #

### 文章目录 ###

*  BFC的定义和作用
 *   *   *  开启BFC解决外边距重叠问题
         *  BFC解决浮动元素覆盖问题
         *  开启BFC属性解决浮动问题：

在页面中的元素都有一个隐含的属性，这个属性叫做BFC(Block Formatting contnt)，该属性可以开启或关闭

当开启元素的BFC属性时，元素有如下特征：

1.  父元素的垂直外边距不会和子元素重叠。（不会产生外边距传递）
2.  开启BFC的元素不会被浮动的元素覆盖。
3.  开启BFC的父元素可以包含浮动元素。

### 开启BFC解决外边距重叠问题 ###

为任意元素添加父元素并开启BFC

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>1</title>
      <style>
        .son{
         
          border: 1px red solid;
          width: 150px;
          height: 150px;
          background-color: chartreuse;
          margin-bottom: 50px;
        }
        .father{
         
          overflow:hidden ;
        }
        .box{
         
          width: 150px;
          height: 150px;
          margin-top: 40px;
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
      <div class="box"></div>
    </body>
    </html>

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

给子元素设置margin-top:50px;发生子父元素发生外边距传递

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

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .father{
         
          width: 300px;
          height: 300px;
          background-color: red;
          /* 给父元素开启BFC */
          overflow: hidden;
        }
        .son{
         
          width: 100px;
          height: 100px;
          background-color: blue;
          margin-top: 50px;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
    </body>
    </html>

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

### BFC解决浮动元素覆盖问题 ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .c1{
         
          float: left;
          width: 200px;
          height: 200px;
          background-color: red;
        }
        .c2{
         
          width: 300px;
          height: 300px;
          background-color: aqua;
          /* 开启BFC解决浮动元素覆盖问题 */
          overflow: hidden;
        }
      </style>
    </head>
    <body>
      
      <div class="c1"></div>
      <div class="c2"></div>
    </body>
    </html>

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

如果在c2后面再添加一个div，则会在下一行显示，如：

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

### 开启BFC属性解决浮动问题： ###

1.  设置元素浮动 -->副作用：父元素下面的兄弟元素会上移，不建议使用。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <title>1</title>
      <style>
        .father{
         
          border: 1px red solid;
          float: left;
        }
        .son{
         
          width: 100px;
          height: 100px;
          background-color: aqua;
          /* 设置浮动 */
          float: left;
        }
        .box{
         
          /* clear: left; */
          width: 150px;
          height: 150px;
    
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
      <div class="box"></div>
    </body>
    </html>

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

1.  设置元素的决定定位或固定定位：position:absolute;–>副作用：父元素下面的兄弟元素会上移，不建议使用。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <title>1</title>
      <style>
        .father{
         
          border: 1px red solid;
          /* 使用定位开启BFC */
          position: absolute;
        }
        .son{
         
          width: 100px;
          height: 100px;
          background-color: aqua;
          /* 设置浮动 */
          float: left;
          
        }
        .box{
         
          /* clear: left; */
          width: 150px;
          height: 150px;
    
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
      <div class="box"></div>
    </body>
    </html>

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

1.  使用设置元素inline-block方式–>副作用：如果父元素没有设置宽度，则父元素宽度丢失

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <title>1</title>
      <style>
        .father{
         
          border: 1px red solid;
          /* 使用inline-block方式开启BFC */
          display: inline-block;
        }
        .son{
         
          width: 100px;
          height: 100px;
          background-color: aqua;
          /* 设置浮动 */
          float: left;
          
        }
        .box{
         
          /* clear: left; */
          width: 150px;
          height: 150px;
    
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
      <div class="box"></div>
    </body>
    </html>

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

1.  将元素的overflow设置为非visible的值方式开启。副作用小，通常使用。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <title>1</title>
      <style>
        .father{
         
          border: 1px red solid;
          /* 将元素的overflow设置为非visible的值方式开启 */
          overflow: hidden;
        }
        .son{
         
          width: 100px;
          height: 100px;
          background-color: aqua;
          /* 设置浮动 */
          float: left;
          
        }
        .box{
         
          /* clear: left; */
          width: 150px;
          height: 150px;
    
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son"></div>
      </div>
      <div class="box"></div>
    </body>
    </html>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/41a97d3b7da14dd58652cde992a3ce6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/ff1a75924b8d4ca083a166462d19b1c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220829/2fa821a788bb4d098c0b9a2bcd22c7e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220829/5a2f98609e514d77abdfe9e9c402a5bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220829/5f5ab1b938c24d85b4025a67850660d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20220829/2612ec1c38d84c388db24c1787fbcc62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20220829/be131f1fe29741749356cb77d8766895.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20220829/4791dd8838aa463aae590e544dac7309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20220829/0a2b3e9d4fb24911b24bf7be6ecda910.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20220829/5e058146f76b4a06aff49936ebfc5f9d.png