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 属性规定元素的哪一侧不允许其他浮动元素。

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;
}