09-CSS中的BFC

CSS 中的 BFC

什么是 BFC?

   BFC（Block Formatting Context）格式化上下文，
   是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器
   
   可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

BFC 的布局规则？

1、内部的Box会在垂直方向，一个接一个地放置
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
3、每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此
4、BFC的区域不会与float box重叠
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6、计算BFC的高度时，浮动元素也参与计算

如何触发 BFC?

1、body 根元素
2、float的值 不是none
3、position的值 不是static或者relative
4、overflow的值 不是 visible
5、display的值 是inline-block、table-cell、flex、table-caption或者inline-flex...

适用解决哪些问题

解决浮动带来的高度塌陷问题

方案一
	父元素添加 overflow:hidden
	
	优点：代码简洁
	缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
	
方案二
	使用 after 伪元素清除浮动
		.clear::after { 
			content: '';
			display: block;
			height:0; 
			visbility: hidden;
			clear: both;
		}
		.clear {
			*zoom: 1;
			/* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
		}
		
		优点：符合闭合浮动思想，结构语义化正确
		缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout
		
方案三
	使用 before 和 after 双伪元素清除浮动
		.clear::after, .clear::before {
			content: '';
			display: block;
		}
		.clear::after {
			clear: both;
		}
		.clear {
			*zoom: 1;
			/* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
		}
		
		优点：代码更简洁
		缺点：用zoom:1触发hasLayout

布局方案（自适应）

窗口自适应：页面中的盒子大小会随着页面的大小的变化发生相应的变化
	设置方法 html,body{ height:100%; width:100%; }

引入自动计算大小的函数：calc()
用于动态计算值
calc()函数支持 "+", "-", "*", "/" 运算
calc()函数使用标准的数学运算优先级规则
eg: width: calc(100% - 200px)

方案一：
	一侧固定，一侧自适应
	
	通过浮动的方法
	通过定位的方法来设置元素的大小

方案二
	左右固定，中间自适应
	
	通过浮动的方法
	通过定位的方法来设置元素的大小

方案三
	圣杯布局（三栏布局）