关于高度坍塌

当父元素未设置高度和宽度的时候，子元素浮动时，那么父元素的高度就会塌缩为零，前提是它只包含浮动元素，解决高度塌陷的问题很简单，可以浮动父级元素、清除法等等，均可实现。下面一一为大家稍微解说一下。首先来个例子：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style> 
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.first{
　　　　margin:20px;
　　　　background:lightgreen;
　　　　border: 2px solid lightgreen;
　　　　/*display:inline-block;*/
　　　　/*overflow:hidden;*/
　　　　/*float: left;*/如果选择这种方法，一定要在该元素的下个元素添加clear:both,
　　　　/*position: absolute;*/

}

ul{
　　overflow:hidden;
　　margin:10px;
　　background:lightblue;
　　width:100px;
　　height:200px;
　　float: left;
}
li{
　　margin:25px;
}
</style> 

</head>

<body class="clar"> 
<div class="first">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

</div>

<!--<div style="clear:both"></div>-->

</body>

</html>

解决办法主要有：第一，子元素中用padding设置边距而不是margin；第二，父元素中加入padding或者border，给你的子元素一个限制；第三，父元素添加overflow：hidden；

第四，用清除浮动的方式，最科学的清除浮动方式为父div的css样式设置：div:after{clear:both;display:block;content:"";},还有一个方法就是给父元素的最后加一个空div，空div的css样式设置成{clear：both；}

原理就是：一个父div如没有上补白padding和上边距border限制咋其中的子元素，这个div边距会和子div最大边距合并（同级的div间没有此情况）。

posted @ 2016-09-25 17:13  夏吟秋  阅读(304)  评论(0)  编辑  收藏  举报