css边框和浮动属性边框和浮动 .box{/* 只能占有300px */ width: 290px; height: 2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框和浮动</title>
		<style>
			.box{/* 只能占有300px */
				width: 290px;
				height: 290px;
				/* border: 5px solid red;/* 边框属性；第一个值：边框的宽度；第二个值：边框的样式（线性）solid实线 dashed虚线 dotted点划线；第三个值：边框的颜色 */ 
				border-right: 5px dashed blue;
				border-top: 5px solid coral;
				border-bottom: 5px dotted black;
				border-left: 5px solid yellow;
				/* 边框在容器中会占据实际位置 */
				float: left;
			}
			/* 如果想要元素并排就全部加上浮动，第二个元素会贴在第一个元素右边 
			浮动元素不占位置：浮动的块元素宽度不能自适应*/
			.a{
				width: 300px;
				height: 300px;
				background-color: #23b2ff;
				float: left;
			}
			.b{
				width: 300px;
				height: 300px;
				background-color: #fff4b4;
				float: left;
			}
			.c{
				width: 300px;
				height: 300px;
				background-color: #36ff20;
				clear: both;/* 清除浮动对其的影响 */
			}
		</style>
	</head>
	<body>
		<!-- 浮动的作用：让块元素并排显示 -->
		<div class="box">
			
		</div>
		<div class="a">
			
		</div>
		<div class="b">
			
		</div>
		<div class="c">
			
		</div>
	</body>
</html>