CSS高度塌陷及其解决方法

最新推荐文章于 2024-05-09 21:29:56 发布

我是梁小怂

最新推荐文章于 2024-05-09 21:29:56 发布

阅读量691

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_42040512/article/details/104593985

版权

	最近在做一些实例练习时，总会发生一些高度塌陷的问题，在这里详细介绍一下高度塌陷及其解决方法。

一、CSS高度塌陷问题

	在文档流中，父元素如果不设定高度，那么它的高度就由子元素来决定，由子元素的内容来将父元素撑开。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.fuyuansu{
    width: 500px;
					background-color: red;
					margin: 0 auto;
					border: 1px solid #000000;}
			.ziyuansu{
    width: 300px;
					  height: 300px;
					  background-color: green;}		
		</style>
	</head>
	<body>
		<div class="fuyuansu">
			<div class="ziyuansu">		
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

	当子元素设置浮动后，子元素浮动起来，父元素没有了子元素内容支撑就失去了高度，也就是常说的父元素高度塌陷。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.fuyuansu{
    width: 500px;
					background-color: red;
					margin: 0 auto;
					border: 1px solid #000000;}
			.ziyuansu{
    width: 300px;
					  height: 300px;
					  background-color: green

最低0.47元/天解锁文章

我是梁小怂

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS高度塌陷及其解决方法

最近在做一些实例练习时，总会发生一些高度塌陷的问题，在这里详细介绍一下高度塌陷及其解决方法。一、CSS高度塌陷问题在文档流中，父元素如果不设定高度，那么它的高度就由子元素来决定，由子元素的内容来将父元素撑开。例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <...
复制链接

扫一扫