css浮动属性

最新推荐文章于 2023-02-10 09:48:02 发布

LCY133

最新推荐文章于 2023-02-10 09:48:02 发布

阅读量141

点赞数

分类专栏： # 前端文章标签： html css

本文链接：https://blog.csdn.net/LCY133/article/details/108873618

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

浮动属性在网页布局中常用于创建瀑布流效果，通过设置`float:left`或`float:right`，可以让元素脱离正常文档流并进行水平排列。当一行宽度不足时，元素会换行显示。此外，浮动元素还能使周围内容环绕其显示，形成环绕效果。在示例中，展示了如何利用浮动属性创建一个红色、绿色和黄色的矩形，并让文本环绕红色矩形展示。

摘要由CSDN通过智能技术生成

浮动属性使用非常多
一般为垂直排布的瀑布流，
但是如果使用浮动主题就可以将垂直变为水平
如果一行的宽度不够就会换行显示

浮动主要为了脱离文档流(垂直排列)
语法:
选择符{float:left/right}
特点：
1.div块元素失去“块状”换行显示特征，变为行内元素
2.紧贴上一个浮动元素(同方向)或父级元素的边框，如宽度不够将换行显示
3.占据行内元素(文字段落)的空间，导致行内元素围绕显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width:100px;
				height:100px;
				background: red;
				margin-bottom: 10px;
				float: left;
			}
			.box2{
				width:200px;
				height:200px;
				background: green;
				margin-bottom: 10px;
				float: left;
				//浮动
			}
			.box3{
				width:300px;
				height:300px;
				background: yellow;
				margin-bottom: 10px;
				float: left;
			}
			</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

在这里插入图片描述

可以实现一个环绕效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width:100px;
				height:100px;
				/* background: red; */
				/* margin-bottom: 10px; */
				background-color: rgba(255,0,0,0.5);
				/* 半透明的，红色色调  浮动 */
				float: left;
			}
			</style>
	</head>
	<body>
		<div class="box1"></div>
		<p>
			阿加莎·克里斯蒂（Agatha Christie，1890—1976）是英国著名女作家，以擅长写侦探小说闻名于世。她也是目前在欧美各国颇为流行的侦探惊险戏剧的创始人。
 阿加莎·克里斯蒂，原名阿加莎·玛丽·克拉丽莎·米勒，一八九零年九月十五日，生于英国德文郡托尔奎市。她父亲是美国人，母亲是英国人。阿加莎十一岁时，父亲去世，由母亲抚养成人。一九零六年，她去巴黎学习音乐，但不久就放弃歌唱家生活，转而从事写作。一九一四年，她与阿奇博尔德·克里斯蒂上校结婚。第一次世界大战期间，她参加了红十字志愿队，从事救护工作，从而使她得到了许多药物知识。对她以后的创作颇有得益。一九二八年，阿加莎和阿奇博尔德·克里斯蒂离婚。两年后，她随一考古队去美索不达米亚访问，和青年考古学家马克斯·马洛温相遇，双方一见倾心，同年九月结婚，但发表侦探作品，仍沿用“阿加莎·克里斯蒂”这一姓名。以后，她曾多次随丈失去中东旅行，写出许多以中东为背景的作品，由于作者的亲身经历和体会，这些作品在描写风土人情、渲染情景气氛方面，真实动人，丰富多彩，一九五六年，阿加莎六十六岁时，获不列颠帝国勋章及埃克塞特大学名誉文学博士学位；一九七一年，获女爵士封号。一九七六年一月十二日，阿加莎·克里斯蒂以八十五岁高龄在英国沃林福特逝世。她的生平事迹已拍成传记片《阿加莎》。
		</p>
	</body>
</html>

`