目录
高度塌陷与BFC
1.高度塌陷
在浮动布局中,父元素的高度默认是被子元素撑开的
当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失
父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱
注意:所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理!
2.BFC
BFC(Block Formatting Context)块级格式化环境
- BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC
- 开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点
- 不会被浮动元素覆盖
- 父子元素外边距不会重叠
- 可以包含浮动的元素
开启方法:
- 设置为浮动
- 设置为行内块
- 设置
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;
}