dic取消浮动

最新推荐文章于 2022-08-12 00:20:44 发布

Jaylin516041

最新推荐文章于 2022-08-12 00:20:44 发布

阅读量645

点赞数

本文链接：https://blog.csdn.net/guojialing00/article/details/50517756

版权

8小时学会div+css 视频教程专栏收录该内容

10 篇文章 0 订阅

订阅专栏

当有多个div并且要求其并排显示时，需要设置其float属性。则div是浮动显示的，不添加浮动属性的DIV是会添加到浮动的DIV下如下：

代码：

<html>
<head>
	<meta charset="utf-8"/>
	<title>第6课-浮动布局</title>
	<style type="text/css">
	#rside{
		height:100px;
		background: green;
		width: 200px;
		float: right;
	}
	#lside{
		height: 100px;
		background: blue;
		width: 200px;
		float: left;
	}
	#common{
		height: 200px;
		width:400px;
		background: #FFFF00;

	}
	</style>
</head>
<body>
	<div id="rside">我是右</div>
	<div id="lside">我是左</div>
	<div id="common">我是普通</div>

</body>
</html>

显示效果如下：

现希望普通的这个DIV不被左浮动的DIV覆盖，可以对普通的这个DIV添加clear属性，禁止该DIV上有浮动的DIV

代码：

<html>
<head>
	<meta charset="utf-8"/>
	<title>第6课-浮动布局</title>
	<style type="text/css">
	#rside{
		height:100px;
		background: green;
		width: 200px;
		float: right;
	}
	#lside{
		height: 100px;
		background: blue;
		width: 200px;
		float: left;
	}
	#common{
		height: 200px;
		width:400px;
		background: #FFFF00;
		clear: left;

	}
	</style>
</head>
<body>
	<div id="rside">我是右</div>
	<div id="lside">我是左</div>
	<div id="common">我是普通</div>

</body>
</html>

显示效果如下：