BFC的特性与应用

1. Box垂直方向的距离由 margin 决定，属于同一个BFC的两个相邻box的 margin 会发生重叠

   • 应用：防止 marin 重叠

   • <style>
     	.box1 {
     		width: 200px;height: 200px;
     		background-color: red;
     		margin-bottom: 100px;
     	}
     	.box2 {
     		width: 200px; height: 100px;
     		background-color: orange;
     		margin-top: 50px;
     	}
     	.fuqin{
     		/* 只要触发fuqin为BFC即可 */
     		float: left;
     	}
     </style>
     <div class="box1"></div>
     <div class="fuqin">
     	<div class="box2"></div>
     </div>
     <!--
     1、不给box2添加fuqin的时候
     	此时box1和box2之间的垂直距离显示是100, 原因是因为box1和box2都在html里面,
     而html是BFC, 也就是说box1和box2属于同一个BFC,  属于同一个BFC的2个相邻box的margin会发生重叠
     2、解决方法
     	就是让box1和box2属于不同的BFC, 就不会发生重叠
         当给下面的盒子添加了fuqin, 且给fuqin添加了overflow:hidden;之后，
         就触发fuqin变成了BFC, 也就是说现在box1在html这个BFC里面, box2在fuqin这个BFC里面, 
         此时box1和box2属于不同的BFC, 那么他们的上下间距就不会重叠。
        这时只是fuqin和box1在同一个bfc里面。
     -->
     

2. BFC的区域不会与 float box发生重叠

   • 应用：制作左边固定右边自适应的2栏布局

   • 说明了为什么盒子都浮动之后会横着排

   • <style>
     	.left{
     		width: 200px; height: 100px;
     		background-color: yellow;
     		/* left就是浮动盒子, 目前浮动盒子和right发生重叠了, 
                如果想要不重叠,可以触发right为BFC */
     		float: left;
     	}
     	.right{
     		width: 800px; height: 300px;
     		background-color: orange;
     		/* float: left; */
     		/* overflow: scroll; */
     		/* display: flex; */
     		/* position: absolute; */	
     	}
     </style>
     <div class="left"></div>
     <div class="right"></div>
     <!--
     	当给right添加了浮动之后, right就是BFC, 
     	   BFC区域不会与浮动盒子发生重叠, 所以当多个盒子同时浮动了之后, 多个盒子会横着排列
         给right用定位的时候注意:
     	  定位之后, right只是层级关系在left上面, 类似于天与地的关系, 
     	  这并不是重叠了,视觉上只是right把left给覆盖了。
     	  重叠的视觉效果是2个盒子有交叉 ***
     -->
     

3. 计算BFC的高度时，浮动元素也参与计算

   • 应用：清除内部浮动，解决高度塌陷
   • 详见清除浮动7大方法
     地址：清除浮动7大方法

4. BFC内部的box会在垂直方向，一个接一个的放置

   • 注意，BFC只针对块级元素，所以行内元素还是横着排
   • <div>、<p> 为什么竖着排？
     • 站在元素类型的角度，它们是块元素，块元素是竖着排的
     • BFC角度：它们都在html里面，html是BFC，而BFC内部的Box会在垂直方向一个接一个的放置，所以竖着排

5. 每个元素的 margin box的左边会与包含块 border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此

   • 说明了 margin-left 等的距离与父元素的边框没有关系，它是从边框里面开始计算距离的，更深度说明了边框是在盒子外面加的
   • 即便存在浮动也不会影响 margin-left

6. BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素