浮动

发布时间：2020-12-17 20:54:33 所属栏目：安全来源：网络整理

导读：浮动：解决一行中显示多个盒子的问题，并且这些盒子的位置可控 float:left float:right 标准流：浏览器默认摆放盒子的标准浮动的特点：浮动的元素会脱离标准流：如果一个元素按照正常的标准来显示会在html中所属的位置占位，后面的元素会紧跟着他，但是

浮动：

解决一行中显示多个盒子的问题，并且这些盒子的位置可控

float:left

float:right

标准流：浏览器默认摆放盒子的标准

浮动的特点：

浮动的元素会脱离标准流：

如果一个元素按照正常的标准来显示会在html中所属的位置占位，后面的元素会紧跟着他，但是浮动脱离了标准流，将来在看到浮动的元素之后，不能以正常的标准来进行判断

浮动以后的元素会覆盖标准流的元素之上

浮动规则：浮动找浮动，不浮动找不浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*
			{
				padding: 0;
				margin: 0;
			}
			.nav
			{
				width: 980px;
				height: 50px;
				background-color: gainsboro;
				margin: 0 auto;
			}
			.logo
			{
				width: 980px;
				height: 100px;
				background-color: paleturquoise;
				margin: 0 auto;
			}
			.content
			{
				width:980px;
				height: 500px;
				background-color: peachpuff;
				margin: 0 auto;
			}
			.mess
			{
				width: 980px;
				height: 500px;
				background-color: pink;
				margin: 0 auto;
			}
			.foot{
				width: 980px;
				height: 50px;
				background: palegreen;
				margin: 0 auto;
			}
			.left
			{
				width: 300px;
				height: 500px;
				background-color: crimson;
				float: left;
			}
			.right
			{
				width: 660px;
				height: 500px;
				background-color: orchid;
				float: right;
			}
			div
			{
				margin-top:3px !important;
			}
			
		</style>
	</head>
	<body>
		<div class="nav">
			导航
		</div>
		<div class="logo">
			商标
		</div>
		<div class="mess">
			页面信息
		</div>
		<div class="content">
			 <div class="left">左</div>
			 <div class="right">右</div>
		</div>
		<div class="foot">
			底部
		</div>
		
	</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!