解决浮动后的高度塌陷问题的四种方式

解决高度塌陷问题

首先来介绍一下高度塌陷问题
1、在浮动布局中，父元素的高度默认是被子元素撑开的。
2、当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失后，其下的元素会自动上移，导致页面混乱。

解决高度塌陷的四种方法：

• BFC
• clear
• 使用伪类after
• clearfix

一、BFC全称 (Block Formatting Context) 块级格式化环境

元素开启BFC的特点:
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含子元素

开启BFC的方式:
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值
࿰