高度塌陷

1.什么是高度塌陷

 在文档流中 当父元素的高度不设置，让子元素的高度来撑开时。当子元素设置浮动以后，子元素脱离文档流，那么父元素将包不住子元素。

那么父元素的高度就塌陷了，就会导致文档流中的父元素的兄弟元素，从后面顶上来。导致页面显示错误

解决高度塌陷 方法1

    bfc bfc 是每个属性的一个隐藏的样式。当开启了bfc有以下功能

        1.父元素子元素的外边距不再重叠

        2.不在被浮动元素覆盖。

        3.可以包含住浮动元素

    怎样开启 bfc？

    开启bfc的方法有很多种 我们选一种最好的

    2.开启浮动

        父元素浮动子元素浮动那么自然就能保住他了。但是这种方式不能解决问题。因为两个元素都浮动了，那么他们后面的元素

        就都顶上来了。

   3.开启绝对定位。

  也无法结局问题

    1。将overflow设置为不是默认值即可开启。

    给样式添加 overflow样式 将他的值设置为 hidden。这样就可以避免高度塌陷了 ，推荐使用这种方法避免高度塌陷。但是

  这种方法也在绝对定位中会有一点副作用。推荐使用这种

  但是在 ie6.0中没有 bfc。有一个haslayout

 通过设置 zoom=1.开启。也可以避免高度塌陷。

 但是zoom只有ie 认识 其余浏览器都不认识。所以要两种都写。

解决高度塌陷2

        clear 清除兄弟元素 浮动 对本身造成的影响，

         可选值 left        表示清除左浮动元素对自己造成的影响。加入设置了此值，那么他前面的元素左浮动，则不会对他的位置                                产生影响

                    right      表示清除左浮动元素对自己造成的影响。加入设置了此值，那么他前面的元素左浮动，则不会对他的位置                                产生影响

                    both      清除影响最大的。

给会塌陷的元素的后面。添加一个块元素。也就是给设置浮动的那个元素的后面添加一个块元素

然后将他的clear 样式设置为 both 这样。他前面的兄弟元素浮动那么，他也当他没浮动。所有他的位置不会上跳

还是在那个位置。所以就能撑起父元素的高度了。

这是w3c官网推荐我们使用的方法。这种方法比较好，几乎没有副作用小

但是  他会多添加一个元素。

解决高度塌陷3

通过一个伪类after选中元素的最后面，在元素后面添加一个空字符。利用display 将他转换成块元素。

在设置clear 为both，这种方法和方法2的原理是一样的。但是这种不会再页面中添加一个没用的块。

clearfix:after{
				/*添加一个空元素*/
				content: "";
				/*转换成块元素*/
				display: block;
				/*清楚左右浮动产生的影响
				 */
				clear: both;
			}