谈谈BFC

BFC(Block Formatting Context）中文叫块级格式化上下文, 它是一个独立渲染的区域。它有着独立的渲染规则，它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

BFC触发条件

浮动元素（float不为none）
绝对定位元素（position: flixed | absolute）
overflow (auto | scroll | hidden)
display (table-cell | table-caption | inline-block | inline-flex | flex)
根元素

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置(即块级元素独占一行)。
BFC的区域不会与float box重叠(利用这点可以实现自适应两栏布局)。
内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)。
计算BFC的高度时，浮动元素也参与计算。（清除浮动 haslayout）
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC特性

阻止垂直外边距重叠
在同属于一个BFC时，两个元素会发生垂直的margin重叠

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
</head>
<style>
  p {
    background: blue;
    width: 100px;
    height: 100px;
    margin: 100px;
  }
</style>
<body>
<div>
  <p>jjjj</p>
  <p>hhhh</p>
</div>
</body>
</html>

谈谈BFC
在上面这个例子中，两个块元素之间的距离为100px，因为发生了margin重叠，那么怎么让它们之间的距离为200px呢？让它们不处在同一个BFC中

<style>
  p {
    background: blue;
    width: 100px;
    height: 100px;
    margin: 100px;
  }
  .margin-overlay {
    overflow: hidden;
  }
</style>
<body>
<div>
  <p>jjjj</p>
  <div class="margin-overlay">
    <p>hhhh</p>
  </div>
</div>
</body>

谈谈BFC
BFC不会重叠浮动元素
可以用来实现自适应两栏布局

<style>
  .box1{
    height: 200px;
    width: 100px;
    float: left;
    background: lightblue;
  }
  .box2{
    width: 400px;
    height: 200px;
    background: #eee;
  }
</style>
<body>
<div class="box1">我是一个左浮动的元素</div>
<div class="box2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>

谈谈BFC
解决重叠问题，可以给box2设置overflow属性

.box2{
    width: 400px;
    height: 400px;
    background: #eee;
    overflow: hidden;
    /*overflow: auto;*/
  }

谈谈BFC
BFC可以包含浮动元素
可以用来清除浮动

<style>
  .box1 {
    background: red;
  }
  .box2 {
    width: 100px;
    height: 100px;
    float: left;
    background: blue;
  }

</style>
<body>
<div class="box1">
  <div class="box2">
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>
</div>
</body>

谈谈BFC
由于box2设置了左浮动，脱离了文档流，父元素高度塌陷。为了解决这个问题，可以给父元素触发BFC

.box1 {
    background: red;
    overflow: hidden;
  }

谈谈BFC

BFC触发条件

BFC布局规则

BFC特性

相关推荐