先问一下什么是高度塌陷?
答:简单来说,就是包含含有浮动的元素的上一级的高度变为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 发展初期增加
的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。
这就是对于定位和浮动的故事了!