伟大的塌陷
大家都用过css中的float属性哈。不知道css的float？！！那就别看了肯定会浪费你的时间，还是做点你喜欢做的事情吧。
昨天写前台代码的时候发现了一个很诡异的现象：
顺便把代码（精简过的模型）贴出来
html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
css部分
#main
{
width:950px;
margin:10px auto 0;
clear:both;
text-align:left;
}
#left
{
width:300px;
height:300px;
float:left;
margin-right:10px;
background-color:Blue;
}
#right
{
border:1px;
height:300px;
width:300px;
float:left;
margin-bottom:5px;
background-color:Blue;
}
#footer
{
height:200px;
width:100%;
background-color:Red;
}
本来在页面最下面的div块跑到了导航条的下面，当初有点不可思议。这到底是肿么了呢？？！！！当初有点感冒一看这样就烦了，真是诡异。
昨天晚上的事一直放心不下，今天起来就扮演起道士的角色出来伏魔。我仔细看了一下我的html 代码的结构然后又瞅了瞅我的css。我发现了我原来一直没有注意到的问题就是css中浮动的塌陷问题。然后我在id为main的div属性中加了一个heigh属性。问题就解决了。如下图所示：当然我这是解决这个问题的一种方法。下面会详细介绍怎么样解决浮动塌陷的问题。
既然提到了css中浮动的塌陷那就聊聊它是到底怎么回事吧。
使用浮动(float)的一个比较疑惑的事情是他们会影响包含他们的父元素的。如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。在这里我们可以称为“塌陷”。如上面遇到的问题。
解决上面的问题有以下四种方式：
1.在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div
2.在使用float元素的父元素添加overflow:hidden
3 .使用after伪对象清除浮动
第四种就是我刚才用的那种很无厘头的方式，有一定的局限性。建议大家用上面的那三种方式。
希望对大家有所帮助。说的有不对的地方，欢迎拍砖。
浙公网安备 33010602011771号