web前端总复习（二）：BFC

1. 概念：BFC是块级格式化上下文，用于布局块级盒子的一块渲染区域。

2. BFC触发方式：
   ① 根元素，即HTML标签。
   ② 浮动元素，即float为left、right。
   ③ overflow的值不为visible，为auto、scoll、hidden。
   ④ display的值为inline-block、flex、grid、table等。
   ⑤ 定位元素，即position为absolute、fixed。

3. 作用：
   ① 清除浮动。
   当子元素存在float属性时，父容器没有设置高度，父容器的高度由子元素撑起。这时候在父容器中添加overflow:hidden来创建一个BFC即可解决问题。

<div class="container">
    <div></div>
    <div></div>
</div>

.container {
      width: 600px;
      background-color: black;
    }

.container div {
      float: left;
      width: 200px;
      height: 200px;
      margin-left: 10px;
      background-color: green;
    }

+++改进后++++

.container {
      width: 600px;
      background-color: black;
      overflow: hidden;
    }

    .container div {
      float: left;
      width: 200px;
      height: 200px;
      margin-left: 10px;
      background-color: green;
    }

② 防止文字环绕。
图片设置float:left，文字设置overflow:hidden。

<div>
   <img src="../wddw" alt="">
   <p>test test test test test test test test test test test test test</p>
 </div>

 img {
      float: left;
      width: 40px;
      height: 40px;
    }

++++改进后++++

 img {
      float: left;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    p {
      overflow: hidden;
    }

③ 防止外边距折叠。
在常规文档流中，子元素是沿着父元素顶部开始一个一个摆放，相邻兄弟间的垂直间距由他们当中间距最大的一个来决定，而不是叠加在一起，这就形成了边距折叠。这时候只用在一个兄弟上面再嵌套一个div即可。

  <div class="container">
    <p class="one">one</p>
    <p class="two">two</p>
  </div>

container {
      width: 200px;
      background-color: black;
    }

p {
      width: 150px;
      background-color: green;
    }

.one {
      margin: 10px 0;
    }

.two {
      margin: 20px 0;
    }

++++改进后++++

 <div class="container">
    <p class="one">one</p>
    <div class="new">
    <p class="two">two</p>
    </div>

container {
      width: 200px;
      background-color: black;
    }

    p {
      width: 150px;
      background-color: green;
    }

    .one {
      margin: 10px 0;
    }

    .two {
      margin: 20px 0;
    }

    .new {
      overflow: hidden;
    }