先问一下什么是高度塌陷？
答：简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.par {
border: 1px solid green;
}
.sub {
width: 20%;
height: 50px;
float: left;
border: 1px solid red;
}
.only {
width: 30%;
height: 60px;
background: #999;
}
</style>
</head>
<body>
<div class="par">
<div class="sub div1"></div>
<div class="sub div2"></div>
<div class="sub div3"></div>
</div>
<div class="only"></div>
</body>
</html>
这个可以简单来说就是一个塌陷了，那么解决办法是什么呢请看下面我为大家说一下。
解决方法：
首先从上面的例子中可以很容易看到，导致问题出现的原因就是因为设置了浮动，当子元素设置了浮动的时候，子元素就会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素高度塌陷
那么浮动是什么呢？
float是css的定位属性，通过使用float这个属性可以实现元素的浮动
| left |
right |
none |
inherit |
| 元素向左浮动 |
元素向右浮动 |
默认值，元素不浮动，并会显示在其文本中出现的位置 |
规定应该从父元素继承float属性 |
再说一下定位问题
在上面的问题中不难看出定位和浮动是有若隐若现的关系的。
那么我就给大家简答的说一下吧：
CSS 定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将
布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才
能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的
位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，
这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支
持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加
的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。
这就是对于定位和浮动的故事了！
网友评论