CSS3学习（八）：高度塌陷与BFC

1、高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。如何解决？接着往下看。

2、BFC

BFC（Block Formatting Context）块级格式化环境

• BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
• 开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点：

• 不会被浮动元素覆盖
• 父子元素外边距不会重叠
• 可以包含浮动的元素

那么如何开启元素的BFC呢？

• 设置为浮动（不推荐）：
  将父元素也设为浮动，虽然解决了高度塌陷，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
• 设置为行内块元素（不推荐）：
  将父元素设置为行内块元素，不再独占一行，宽度变了，同时与下方元素产生了一点空隙
• 设置overflow为非visible值：
  既没有覆盖元素，也保持了独占一方的特性（保持了宽度），与下方元素也保持了最初的间隙
  常用的方式为元素设置overflow:hidden（overflow:auto也是ok的） 开启其BFC， 以使其可以包含浮动元素
  overflow:scroll 会有滚动条，可能并不需要的，所以不太推荐

3、clear

clear 属性规定元素的哪一侧不允许其他浮动元素。

在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。
在 CSS2.1中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。
不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

4、clearfix

通过after伪类向元素的最后添加一个空白的元素，然后对其清除浮动，由于这个元素并没有浮动，所以他是可以撑开父元素的高度。这是最推荐使用的方式，几乎没有副作用。

.box1:after{
	/*添加一个内容*/
	content: "";
	/*转换为一个块元素*/
	display: block;
	/*清除两侧的浮动*/
	clear: both;
}

类似的，使用before伪类向元素前面添加一个空白的元素，可以解决父子元素之间的外边距重叠的问题

.box1::before{
    content: '';
    display: table;
}

将两者结合，clearfix 这个样式就可以同时解决高度塌陷和外边距重叠的问题

.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}