前端开发--css--浮动

最新推荐文章于 2024-12-21 02:30:00 发布

小哦--

最新推荐文章于 2024-12-21 02:30:00 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

分类专栏： html +css +javascript

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/94743133

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何使用CSS浮动属性实现图片和文字的环绕效果，详细解释了浮动的基本原理及其在网页设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>浮动</title>
	<style type="text/css">
		.con{
			width: 400px;
			height: 80px;
			border: 1px solid gold;
			margin: 50px auto 0;

		}

		.con div{
			width: 60px;
			height: 60px;
			display: inline-block;
			margin: 10px;
		}

		.box1{
			background-color: green;
			float: left;
		}
		.box2{
			background-color: pink;
			float: right;
		}

	</style>
</head>
<body>

	<div  class='con'>
	 	<div  class='box1'></div>
	 	<div  class='box2'></div>
	</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>浮动</title>
	<style type="text/css">
		
		.con{
			width: 800px;
			height: 800px;
			border: 1px solid black;
			margin: 30px auto 0;
		}

		.pic{
		/*	width: 80px;
			height:80px;
			background-color: gold;*/
			float: left;
			margin:30px;
		}

		.text{
			color: black;
			font-size: 25px;
			margin: 30px;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class='pic'><img src="images/2.jpg"></div>
		<div class='text'>宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画.宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而</div>
		
	</div>

</body>
</html>

在这里插入图片描述
图片设置为浮动，文字设置为不浮动，就形成了文字绕图的效果。