[五]HTML+CSS基础(解决高度塌陷问题)

元素脱离文档流导致的高度塌陷问题

1.问题描述：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

元素脱离文档流的结果

想要这样的效果.png

设置浮动之后（高度塌陷问题）.png

• 由于父元素的高度塌陷，则父元素的所有元素都会向上移动，这样会导致页面布局混乱，所以在开发中一定要避免出现高度塌陷问题

---

2.问题解决一：
根据W3C标准，在页面中元素都有一个隐藏的属性叫Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启BFC后，元素将会具有以下特性：

• 元素的垂直外边距不会和子元素重叠
• 开启BFC的元素不会被浮动元素所覆盖
• 开启BFC的元素可以包含浮动元素

如何开启BFC：

• 1)设置元素的浮动(虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移，不能解决问题)

  ![给父元素设置浮动的结果.png](http://upload-images.jianshu.io/upload_images/3063110-e3f921af945a6f10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 2)设置元素的绝对定位（和1效果差不多，不推荐）
+ 3)设置元素的inline-block（父元素的宽度又没了，不推荐使用）

  ![第三种方式的效果图.png](http://upload-images.jianshu.io/upload_images/3063110-39b189264d80ed92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 4)将元素的overflow设置为一个非visible的值（推荐这种方式开启BFC，副作用小，IE6及以下不支持，此时可以使用hasLayout,给父元素设置```zoom:1```,此处不赘述）

  ![overflow为hidden.png](http://upload-images.jianshu.io/upload_images/3063110-ed5337266a7dad7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


******
> ***3.问题解决二：***
clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。

+ 可选值：
    - left ：忽略左侧浮动 （清除左侧浮动对当前元素的影响）

    - right ：忽略右侧浮动 （清除右侧浮动对当前元素的影响）

    - both ：忽略全部浮动 （清除两侧对他影响最大的浮动对）

    - none ：不忽略浮动，默认值 

/通过空白撑开父元素，清除浮动，基本没有副作用，可以兼容各种浏览器/

![clear.png](http://upload-images.jianshu.io/upload_images/3063110-adcdc009e889bc38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

******
> ***4.问题解决三：***通过after伪类，和添加div效果一样，而且不会再页面中添加div，最推荐的方法