src/css/常见的CSS样式/浮动窗口.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动效果float样式</title>
		
		<style type="text/css">
			
			/* float样式是用来设置当前元素在父元素当中的浮动 顶级父元素为浏览器界面*/
			#outdiv {
				width: 300px;
				height: 300px;
				background-color: red;
				/* 设置当前接节点元素的浮动效果，此时没有父类盒子，在浏览器中进行浮动 */
				
				float: right;
			}
			
			#innerdiv {
				width: 100px;
				height: 100px;
				background-color: blue;
				/* 内盒子浮动于外盒子的右侧 */
				/* 设置当前节点元素的浮动效果，只是浮动于当前元素的父元素内部。 */
				float: right;
			}
		
			#mydiv2 {
				width: 100px;
				height: 100px;
				background-color: red;
				/* 绝对定位 */
				/* 这个代表该元素离浏览器顶部为0px，离左侧为0px，也可以理解为该元素在浏览器左上角 */
				top: 0px;
				left: 0px;
			}
		</style>
	</head>
	<body>
		<!-- 浮动效果float样式 -->
		<!-- 外部div -->
		<div id="outdiv">
			<!-- 内部div -->
			<div id="innerdiv">
			</div>
		</div>
		
		<!-- 绝对定位 -->
		<div id="mydiv2">
			
		</div>
	</body>
</html>