解决高度塌陷问题
首先来介绍一下高度塌陷问题
1、在浮动布局中,父元素的高度默认是被子元素撑开的。
2、当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离,将会无法撑开父元素的高度,导致父元素的高度丢失,高度丢失后,其下的元素会自动上移,导致页面混乱。
解决高度塌陷的四种方法:
- BFC
- clear
- 使用伪类after
- clearfix
一、BFC全称 (Block Formatting Context) 块级格式化环境
元素开启BFC的特点:
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含子元素
开启BFC的方式:
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值<