CSS中的BFC和清除浮动的方法

BFC：Box Formatting Context（块级格式上下文）的缩写。通俗来讲，就是管理块级元素的。

一个块级元素开启BFC后，可以管理块内的所有元素的排版布局，但是不能管理自己本身

BFC的布局规则

a．内部的Box会在垂直方向，一个接一个的放置（块级元素独占一行）

b．BFC的 区域不会与float box重叠------两列布局：左边固定右边自适应（可以开启BFC）

c．内部的Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻的margin会发生重叠

　　　　垂直方向上margin重叠满足的三个条件：垂直排列、相邻、属于同一个BFC　

ｄ．计算BFC的高度时，浮动元素也参与计算（清除浮动　ie6　７开启haslayout）

　　　　元素浮动脱离文档流，正常的元素是感知不到浮动元素的存在，

　　　　但是开启BFC的元素可以感知到浮动元素的存在，进而可以进行高度的计算

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

BFC什么时候会出现（哪些元素会生成BFC？）

ａ．根元素　HTML

ｂ．float属性不为none（浮动的元素）

ｃ．position属性值为absolute或者fixed（绝对定位或固定定位）

ｄ．overflow属性值不为visible　（溢出处理）

ｅ．display的值为：inline-block、table－cell、flex等

 

BFC牵扯到一个非常重要的问题：清除浮动－－让浮动的子元素撑开父级元素的高度

清除浮动的方法

１）直接给父级元素填加高度（扩展性不好）

２)  开启BFC

　　　ａ．给父级元素添加　overflow：hidden、float：left

　　　 b . 子元素position：absolute　父元素position：relative

3)  用br标签  <br clear="all"/>   不符合结构  样式 行为三者分离的要求

4)  空标签 --- 在要清除浮动的元素后面放一个空的div,并给行内样式clear:both   CSS代码冗余 增加浏览器的负担

5)  伪元素 ::after(最常用且性能最高)

.clear{
    *zoom: 1;
}

.clear::after{
	display: block;
	content: "";
	clear: both;
}

注意:浮动和定位盒子的特性----高宽由内容撑开