关于高度坍塌

来源：互联网发布：python 非线性最优化编辑：程序博客网时间：2024/04/28 04:06

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

<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间没有此情况）。

0 0