【BFC盒子】07

BFC

1. BFC(Block fomatting context)即"块级格式化上下文"。是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
2. Box是CSS布局的对象和基本单位，不同类型的Box，会参与不同的Formatting Context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。
   • display 属性为 block, list-item, table 的元素，会生成 block-level box。并且会参与 block fomatting context；(简称BFC)
   • display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且会参与 inline formatting context(简称IFC)
3. BFC布局规则：
   • 内部的Box会在垂直方向，一个接一个地放置。
   • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 【外边距折叠】
   • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   • BFC的区域不会与float box重叠。
   • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
   • 计算BFC的高度时，浮动元素也参与计算。
4. 它是页面中的一块渲染区域，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
5. 哪些元素会变成BFC区域
   • HTML根元素
   • float属性不为none
   • position属性值为absolute或fixed
   • display属性为inline-block, table-caption, flex, inline-flex
   • overflow属性不为visible(~不做处理)。
6. BFC的用法：
   • 自适应两栏布局：利用BFC不会与浮动元素重叠思路
   • 闭合浮动：将父元素设置为1个BFC
   • 防止垂直 margin 重叠：让2个相邻的元素处于2个不同的BFC中
7. calc()函数。用于动态计算长度值。width: calc(100% - 10px)

---

1. 自适应两栏式布局

• overflow:hidden；变为BFC盒子

  .wrap{
      /* 宽度为父元素body的50% */
      width: 50%;
      border: 1px #000 solid;
      margin: 0 auto;
  }
  /* 左边区域 */
  .left{
      width: 200px;
      height: 400px;
      background-color: red;
      float: left;
  }
  /* 右边区域 */
  .right{
      /* 溢出隐藏,将盒子变为BFC盒子 */
      overflow: hidden;
  
      height: 500px;
      background-color: royalblue;
  }
  

  <div class="wrap">
      <div class="left">自适应两栏式布局——左半部分</div>
      <div class="right">自适应两栏式布局——右半部分</div>
  </div>
  

  

  ---

• calc()函数 实现自适应两栏式布局

  .wrap{
      width: 50%;
      border: 1px solid black;
      margin: 0 auto;
      /* 清除浮动 */
      overflow: hidden;
  }
  .left{
      width: 200px;
      height: 200px;
      background-color: chocolate;
      float: left;
  }
  .right{
      /* 注意空格 */
      width: calc(100% - 200px);
      height: 500px;
      background-color: cornflowerblue;
      /* 将该盒子编程BFC盒子 */
      float: left;
  }
  

---

2. 防止外边距折叠

.box{
    width: 200px;
    height: 200px;
    background-color: crimson;
    margin: 20px 0;
}
.bfc{
    overflow: hidden;
}

<div class="box"></div>
<div class="bfc">
    <div class="box"></div>
</div>

---

3. 问题

将一个有浮动子元素的父元素的float设置为left，是否可以闭合浮动，为什么？

答：不会使用该方法闭合浮动。

---