关于高度坍塌

最新推荐文章于 2023-05-23 19:15:00 发布

weixin_30597269

最新推荐文章于 2023-05-23 19:15:00 发布

阅读量111

点赞数

版权

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

}

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

</head>

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

转载于:https://www.cnblogs.com/qiutianlidehanxing-blog/p/5906324.html

关注