BFC

什么是BFC

box Formatting Context可以理解为独立渲染区域

创建BFC方式：

1、float属性不为none

2、position为absolute或fixed

3、display为inline-block,table-cell,flex

4、overflow为hidden auto scroll

BFC解决了什么问题

  • 上下边距重叠问题：

图片说明 

<!-- 解决方案-->
<style>
        body div:first-child {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 10px;
        }

        .p {
            width: 100px;
            height: 100px;
            background-color: black;
            margin-top: 20px;

        }
        p{
            overflow: hidden; /*******************/
        }
    </style>

 <div>1</div>
    <p>
        <div class="p">2</div>
    </p>
  • 内部盒子设置边距导致父盒子塌陷问题

图片说明 

/**解决方案**/
.father {
            width: 100px;
            height: 100px;
            background-color: pink;
            overflow: hidden;  /*******************/
        }
  • 清除浮动

图片说明 

  <!-- 解决方案-->
  <style>
          .father {
              width: 200px;
              background-color: pink;
              overflow: hidden;  /*******************/
          }

          .son {
              float: left;
              width: 50px;
              height: 50px;
              background-color: black;
          }
          .box{
              width: 50px;
              height: 50px;
              background-color: yellow;
          }
      </style>
  </head>

  <body>
      <div class="father">
          <div class="son"></div>
          <div class="son"></div>
      </div>
      <div class="box"></div>
  </body>
  • 浮动产生的文字环绕问题

图片说明 

```html
<!-- 解决方案-->
.box{
     overflow: hidden;
 }
<div class="father">
        <div class="son"></div>
        <div class="box">
            <div>这是文字。。。。。这是文字。。。。。这是文字。。。。。这是文字。。。。。这是文字。。。。。</div>
        </div>
 </div>
```