【web前端(十四)】html_盒模型——浮动

最新推荐文章于 2022-08-01 19:56:49 发布

-_星耀_-

最新推荐文章于 2022-08-01 19:56:49 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

分类专栏： Java

本文链接：https://blog.youkuaiyun.com/LED_of_Java/article/details/98870846

Java 专栏收录该内容

118 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动流</title>
		<style>
		    .up{
				width:200px;
				height:200px;
				background-color: aqua;

				/*这样就脱离了标准流，
				 * 块的基准就不以第一个块的右边框为基准了，
				 * 即当他脱离了标准流，
				 * 块的布局会随页面的大小而改变。
				 * */	 

				float:left;

				/*display:inline-block*/			
				}
				
		    .down{
				width: 300px;
				height: 300px;
				background-color: #FF0000;

				/*相比于display，float的间隙是为零的，
				 且，若将该块的浮动改为right，
				 两个块之间的间距还是很明显的。
				 又因为浮动，margin：auto是不起作用的。
				 若要排开，只能写确切的排开距离，比如margin:222px;*/
				/*float: right;*/
				/*display: inline-block;*/
				/*margin-left: 222px;*/
			}
			
		</style>
	</head>
	<body>
		<div class="up"></div>
		<div class="down"></div>
	</body>
</html>