CSS学习——初识浮动(float)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengxu_kuangrexintu/article/details/83043290

浮动(float)

浮动的作用是让两个div左右布局,在同一行显示。

代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				height: 100px;
				margin-bottom: 10px;
				background-color: green;
				width: 50%;
				float: left;
			}
			.box2{
				height: 100px;
				margin-bottom: 10px;
				background-color: orange;
				width: 50%;
				float: right;
			}
		</style>
	</head>
	<body>
		<!--需求:两个盒子(div)左右布局-->
		<div class="box"></div>
		<div class="box2"></div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/chengxu_kuangrexintu/article/details/83043290