winson的专栏

爱生活

css之浮动以及溢出的处理

本篇主要介绍浮动属性、清除浮动 以及对于溢出的处理方式。

<!doctype html>
<html>
	<head>
		<title>Div+Css布局(浮动以及溢出处理)</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{
			padding:0;
			margin:0;
			}
			.div{
				width:960px;
				height:600px;
				margin:0 auto;  /*居中处理*/
				background-color:#f1f1f1;
			}
			.left{
			float:left;  /*float:left是左浮动*/
			width:260px;
			height:460px;
			background:#ccc;
			}
			.right{
				float:right;
				width:690px;
				height:460px;
				background:#ddd;
			}
			.clear{
				clear:both;  /*clear:both清除浮动*/
			}
			.bottom{
			margin-top:10px;
			height:200px;
			width:960px;
			background:red;
			}
			.introduction{
				width:260px;
				height:120px;
				background:red;
				overflow:auto;  /*overflow溢出的处理方式*/
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="left">
				<div class="introduction">
					今天天气真好啊!今天天气真好啊!今天天气真好啊!今天天气真好啊!今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
					今天天气真好啊!<br />
				</div>
			</div>
			<div class="right"></div>
			<div class="clear"></div>
			<div class="bottom"></div>
		</div>
	</body>
</html>



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012859748/article/details/52348763
文章标签: css 属性 浮动 溢出
个人分类: html5/css相关
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

css之浮动以及溢出的处理

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭