前端：解决高度塌陷

高度塌陷问题：

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素有多高，父元素就有多高。但是子元素设置浮动以后，子元素会脱离文档流，此时会导致子元素的无法撑起父元素的高度，导致父元素高度塌陷。父元素的高度塌陷，则父元素下面的元素都会往上移动，导致页面布局混乱。

 

解决方法一：

根据W3C标准在页面中元素都会有一个隐含的属性叫做 Block Formatting Context 简称BFC，该属性可以设置开启或者关闭，默认是关闭的。

开启元素的BFC，元素会有以下特征：

1. 父元素的垂直外边距不会与子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素

 

那么，如何开启元素的BFC呢？

1、设置元素浮动

                 ----使用此方法，虽然会撑开父元素，但是会导致父元素宽度丢失，而且这种方式会导致下边的元素上移，不能解决问题

2、设置元素的绝对定位

3、设置元素为  inline-block

               ----可以解决问题，但是会导致宽度丢失

4、（推荐方式）将元素的overflow设置为一个非visible的值（将overflow的值设置为hidden是副作用最小的开启BFC）

    overflow : hidden;

但是，在IE6及其以下没有BFC，但是有一个隐含的属于Layout，可以直接将zoom的值设置为1

   zoom: 1;         (zoom 表示放大的意思，后面的数值表示放大几倍）

 

overflow:hidden;
zoom:1;

 

解决方法二：

可以直接在高度塌陷的父元素的最好添加一个空白的div，由于这个div没有浮动，他说可以撑起来父元素的高度
然后对其进行清除浮动。这样通过这个空白的div撑起父元素的高度，基本没有副作用

缺点：
       使用这种方式虽然解决了塌陷问题，但是给页面中添加了多余的结构，但是也是可以进行使用的

 

 

 

解决方法三:

对于方法二的优化