布局：浮动

wjfht

于 2021-06-05 08:38:16 发布

阅读量60

点赞数

本文链接：https://blog.youkuaiyun.com/wjfqht/article/details/117585044

版权

通过设定浮动（float），可以使得元素从原本的文档流中脱离出来，感觉像浮在原本的文档流上面。
先看看正常的块级元素的显示效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#div1{
			background-color: orange;
			width: 200px;
			height: 200px;
		}
		#div2{
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
		#div3{
            background-color: green;
			width: 300px;
			height: 300px;
        }
	</style>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>