浮动布局、定位与弹性盒模型比较-优快云博客

本文链接：https://blog.youkuaiyun.com/wyhcyzai99/article/details/119807756

float+margin方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.container{
			width: 1000px;
			height: 1000px;
			background-color: #FFFFFF;
		}
		
		.container div{
			width: 200px;
			height: 200px;
			border:1px solid #FF0000;
			float: left;
		}
		
		.left{
			margin-right: 10px;
		}
		
		.right{
			margin-left: 10px;
		}
	</style>
	<body>
		<div class="container">
			<div class="left">
				
			</div>
			<div class="middle">
				
			</div>
			<div class="right">
				
			</div>
		</div>
	</body>
</html>

position定位方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.container{
			width: 1000px;
			height: 1000px;
			background-color: #FFFFFF;
			position: relative;
		}
		
		.container div{
			width: 200px;
			height: 200px;
			border:1px solid #FF0000;
			position: absolute;
		}
		
		.left{
			left: 20px;
		}
		.middle{
			left: 400px;
		}
		.right{
			right: 20px;
		}
	</style>
	<body>
		<div class="container">
			<div class="left">
				
			</div>
			<div class="middle">
				
			</div>
			<div class="right">
				
			</div>
		</div>
	</body>
</html>

flex布局方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.container{
			width: 1000px;
			height: 1000px;
			background-color: #FFFFFF;
			display: flex;
		}
		
		.container div{
			width: 200px;
			height: 200px;
			border:1px solid #FF0000;
		}
		
		.left{
			margin-right: 10px;
		}
		.middle{
			margin-right: 10px;
		}
		.right{
			flex: 1;
		}
	</style>
	<body>
		<div class="container">
			<div class="left">
				
			</div>
			<div class="middle">
				
			</div>
			<div class="right">
				
			</div>
		</div>
	</body>
</html>