BFC

2018-05-13 本文已影响4人好奇男孩

2.BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

哪些元素会生成BFC?

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible

BFC的特性

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素-
的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即--- 使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

BFC的作用：

1.外边距合并

外边距合并指的是，两个在普通文档流中的“相邻”元素外边距相遇的时候发生合并的情况。这个所谓的“相邻”可以是父子关系相邻，兄弟关系相邻，甚至如果一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。

合并的结果为：当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较大者；当两个外边距一正一负时，取的是两者的和。

外边距合并的具体情况:

a.父子关系的合并

假如说，父元素和子元素在正常的文档流当中。而且父元素没有边框或者padding，那么父子之间就会发生外边距合并。
（简单的解决方法：

1.给父元素加边框；
给父元素加了边框之后，它们的margin就被边界线隔离开来，就不会发生外边距合并。它们就会各归各位，父元素有父元素的外边距，子元素有子元素的外边距
2.设置父元素的padding
给父元素设置了padding之后，也能够阻止父子的外边距相融合，所以也可以防止父子元素的外边距合并。）

b.兄弟关系的合并:

如果两个兄弟元素在正常的文档流当中，会产生外边距合并。
（简单的解决方案：只设置一个外边距）

c.自身的合并

一个元素如果里面没有东西，也没有边框和padding，那么它自身的外边距就会融合，也会发生外边距合并
(简单的解决方案：
1.给自身加边框；2.给自身加padding)

阻止相邻元素外边距合并：

另外的方法创建BFC:
1.设置float属性不为none；
2.设置position为absolute或fixed；
3.设置display为inline-block, flex, 或者inline-flex
4.设置：overflow不为visible
但是设置这些属性，要了解它们的副作用并修复

<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="header">
    <div>  <h1>hello world</h1></div>
  
  </div>
   <div class="detail">
     内容
   </div>
  <div class="footer1">
<!--     footer1 -->
  </div>
    <div class="footer2">
    footer2
  </div>
</body>
</html>

#header{
  background-color: red;
  margin-bottom:40px ;
/*   border:1px solid #333 */
    /* padding: 1px; */
 overflow: hidden;
  /* float: left;
  width: 100%; */
  /* display: inline-block;
  width: 100%; */
 /*  position: absolute; */
}
#header h1{
  margin-top: 50px;
}
.detail{
  /* float: left;
  clear: both; */
  overflow: hidden;
  margin-top: 30px;
  margin-left: 30px;
  background-color: #00f;
}
.footer1{
  background-color: #0f0;
  margin: 30px;
}
.footer2{
  background-color: yellow;
}

14.png

2.包含浮动：计算BFC的高度时，浮动元素也参与计算

</head>
<body>
<header>
  <h1>hello world</h1>
  <nav>
    <ul>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
    </ul>
  </nav>
</header>
</body>

body{
  background-color: grey;
  margin: 0;
}
header{
    background-color: red;
    overflow:hidden;
  }
ul{
  list-style: none;
}
nav{
  background-color: pink;
  float: left;
}
nav li{
  float: left;
  padding: 10px;
}

13.png

BFC