Django——解决css浮动塌陷的问题

最新推荐文章于 2023-10-19 15:58:09 发布

smallfish118

最新推荐文章于 2023-10-19 15:58:09 发布

阅读量169

点赞数 1

分类专栏： Django

本文链接：https://blog.csdn.net/qq_41470573/article/details/92217244

版权

Django 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

在实现横向排序的时候，就需要用到浮动这个属性，而在排序下面肯定还是有元素的，而为了实现排序，必然会导致父元素的崩塌，这个时候就需要解决父元素的崩塌问题。目前我水平有限，理解可能不全，知道的一个解决方案记录一下。

就是在父元素中设置overflow，这个属性用我自己话来理解，其实就是设置父元素如何包含子元素的问题。

<!DOCTYPE html>
<html>
<head>
	<title>float</title>
	<style type="text/css">
		#div1{
			background-color: skyblue;
			outline: solid;
			overflow: hidden;
		}
		#div12{
			background-color: yellow;
			margin-left: 20px;
			width: 300px;
			height: 200px;
			outline: solid;
			float: left;
		}
		#div13{
			background-color: green;
			width:400px;
			height: 300px;
			margin-left: 20px;
			outline: solid;
			float:left;
		}
		#div2{
			background-color: skyblue;
			outline: solid;
			overflow: hidden;
		}
		#div21{
			background-color: yellow;
			margin-left: 20px;
			width: 300px;
			height: 200px;
			outline: solid;
			float: left;
		}
		#div22{
			background-color: green;
			width:400px;
			height: 300px;
			margin-left: 20px;
			outline: solid;
			float:left;
		}
	</style>
</head>
<body>
<div id="div1">
	<div id="div12"></div>
	<div id="div13"></div>
</div>
<div id="div2">
	<div id="div21"></div>
	<div id="div22"></div>
</div>
</body>
</html>

以上是自己探索的一种解决塌陷的方案，刚刚查了一些资料，目前标准（或者说使用比较多的，较为流行的写法）是清除浮动。

#clearDiv::after{
    /*空*/
    content: "";
    /*内容隐藏*/
    visibility: hidden;
    /*高度为0*/
    height: 0px;
    /*块级显示*/
    display: block;
    /*清除浮动*/
    clear: both;
}

print_r('点个赞吧')；
var_dump('点个赞吧')；
NSLog(@"点个赞吧！")
System.out.println("点个赞吧!");
console.log("点个赞吧!");
print("点个赞吧!");
printf("点个赞吧!\n");
cout << "点个赞吧!" << endl;
Console.WriteLine("点个赞吧!");
fmt.Println("点个赞吧!")
Response.Write("点个赞吧")；
alert（’点个赞吧’）

smallfish118

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django——解决css浮动塌陷的问题

在实现横向排序的时候，就需要用到浮动这个属性，而在排序下面肯定还是有元素的，而为了实现排序，必然会导致父元素的崩塌，这个时候就需要解决父元素的崩塌问题。目前我水平有限，理解可能不全，知道的一个解决方案记录一下。就是在父元素中设置overflow，这个属性用我自己话来理解，其实就是设置父元素如何包含子元素的问题。<!DOCTYPE html><html><...
复制链接

扫一扫