解决高度塌陷定位问题

先问一下什么是高度塌陷？

答：简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去

这个可以简单来说就是一个塌陷了，那么解决办法是什么呢请看下面我为大家说一下。

解决方法：

首先从上面的例子中可以很容易看到，导致问题出现的原因就是因为设置了浮动，当子元素设置了浮动的时候，子元素就会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素高度塌陷

那么浮动是什么呢？

float是css的定位属性，通过使用float这个属性可以实现元素的浮动

left	right	none	inherit
元素向左浮动	元素向右浮动	默认值，元素不浮动，并会显示在其文本中出现的位置	规定应该从父元素继承float属性

再说一下定位问题

在上面的问题中不难看出定位和浮动是有若隐若现的关系的。

那么我就给大家简答的说一下吧：

CSS 定位和浮动

    CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将
    布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才
    能完成的任务。

    定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的
    位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，
    这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支
    持远胜于对其它方面的支持，对此不应感到奇怪。

    另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加
    的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。

这就是对于定位和浮动的故事了！