CSS-盒子的浮动与定位

最新推荐文章于 2023-08-02 13:06:31 发布

娃娃救葫芦爷

最新推荐文章于 2023-08-02 13:06:31 发布

阅读量765

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/cc098818/article/details/99406864

版权

1、盒子浮动 float
Float 属性：
默认是 none ，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子浮动float none</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:none;
		margin:5px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		margin:5px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<div class="d2">盒子B</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子浮动float left</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:left;
		margin:5px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		margin:5px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
	<div class="d2">盒子B</div>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子浮动float right</title>
<style type="text/css">
	.parent{
		padding:5px;
		back

最低0.47元/天解锁文章

娃娃救葫芦爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-盒子的浮动与定位

1、盒子浮动 floatFloat 属性：默认是 none ，按照标准流来定位；Left：左悬浮；Right：右悬浮；<!DOCTYPE html><html><head><meta charset="UTF-8"><title>盒子浮动float none</title><style type="...
复制链接

扫一扫