08-高度塌陷与BFC

高度塌陷与BFC

1.高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的

当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

注意：所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

2.BFC

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

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

元素开启BFC后的特点

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

开启方法：

1. 设置为浮动
2. 设置为行内块
3. 设置overflow为非visible值

• 设置为浮动（不推荐）：很明显下方元素被覆盖了，总不能让所有元素都浮动吧

• 设置为行内块元素（不推荐）：不再独占一行，宽度变了，同时与下方元素产生了一点空隙

• 设置overflow为非visible值：既没有覆盖元素，也保持了独占一方的特性（保持了宽度），与下方元素也保持了最初的间隙

  常用的方式为元素设置overflow:hidden（overflow:auto也是ok的） 开启其BFC， 以使其可以包含浮动元素

  overflow:scroll会有滚动条，可能并不需要的，所以不太推荐
  
  

开启还有其他方法吗？有！非常多！

开启方式都是间接启动的，而且每个开启方式都会有瑕疵

3.clear 清楚浮动影响

作用： 清楚浮动元素对当前元素的影响

本质上就是为元素添加一个margin-top的属性，值由浏览器自动计算

可选值

• left 清楚左侧浮动元素对当前元素的影响
• right清楚右侧浮动元素对当前元素的影响
• both 清楚两侧中影响较大的一侧元素的影响（注意是较大的一侧，而不是说左右两个都清楚）
  

4.after 解决塌陷

高度塌陷，不仅可以用 overflow: hidden等可以为元素开启BFC来解决

还有一种更好的方法
伪元素选择器::after ，在元素的最后添加元素，然后令其clear清楚浮动，就可以解决塌陷的问题
示例

.box1::after{
	content:''; //结尾添加一个空白元素
	clear:both;  //令其不受浮动影响
	display:block; //因为默认情况下::after伪元素是一个行内元素，如果不转为块元素，将仍然撑不起box1的高度
}

5.clearfix 解决垂直布局中边距重叠问题

之前我们说过垂直布局中边距重叠的问题：相邻的垂直方向外边距会发生重叠现象

子元素设置了一个margin-top之后，父元素跟随子元素一起进行了移动

即我们之前说的父子元素间相邻外边距，子元素会传递给父元素（上外边距）

解决这个问题
用伪元素选择器::before

在子元素的前面添加一个空元素，并设置为table

完美!

2. clearfix既解决高度塌陷由解决垂直布局中边距重叠问题

当你在遇到这些问题时，直接使用clearfix这个类即可，他就可以帮你轻松搞定css中的两大难题

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