解决高度塌陷问题

解决高度塌陷问题

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其子元素会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失；父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱。

解决方法

BFC（Block Formatting Context）块级格式化环境：BFC是一个CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC元素会变成一个独立的布局区域。

元素开启BFC后的特点：

1. 元素不会被浮动元素所覆盖
2. 元素子元素和父元素外边距不会重叠
3. 可以包含浮动的子元素

一、一般将元素的overflow设置为一个非visible的值，可以解决高度塌陷问题，常用方式为元素设置overflow:hidden开启BFC，以使其可以包含浮动元素。但使用会有副作用

二、通过clear属性来清除浮动元素对当前元素产生的影响：clear:left —> 清除左侧浮动元素对当前元素的影响；clear:right —> 清除右侧浮动元素对当前元素的影响；clear:both —> 清除两侧中影响最大的那侧

原理：设置清除浮动元素之后，浏览器会自动为元素添加一个外边距，以使其位置不受其他元素的影响

三、最好的方式：高度塌陷问题是属于CSS样式的，最好的方式是交由CSS它自己处理，此时可以使用**::after**伪元素来进行解决

选择器名::after{

​ content: ’ ';

​ display:block; //因为伪元素after是行元素，所以需要先转为块级元素

​ clear:both;

}

同时解决高度塌陷和外边距重叠问题，使用clearfix

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

以上代码可以直接套用