CSS-浮动定位

最新推荐文章于 2024-07-10 10:14:49 发布

Alicization~Iris

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量324

点赞数

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

本文链接：https://blog.csdn.net/qq_44296442/article/details/119544888

版权

首先要知道两个概念：块级元素与行内元素

1、常见的块级元素有：div、h、ul、li、p
特点：
①能够设置宽高（宽度如果不设置，默认为父容器的宽度）
②独占（父容器）的一行，不能与其他元素并列

2、常见的行内元素有：span、a、input、u、i、img
特点：
①不能设置宽高，默认宽高就是文字的宽度和高度（img比较特殊，可以设置宽高）
②与其他行内元素可以并排

但是我们在设计一个页面的时候通常想要一个元素既能够设置宽高，又能够与其他元素并排，这就要用到浮动定位了

首先有一个小知识要知道，块级元素与行内元素的转换。通过对元素display属性的设置，可以实现块级元素与行内元素的转换：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* display: inline(设置为行内元素) block(设置为块级元素) */
			div{
     
				display: inline;
				width: 200px;
				height: 200px;
				background-color: red;
				margin-top: 2px;
			}
			span{
     
				display: block;
				width: 200px;
				height: 200px;
				background-color: green;
				margin-top: 2px;
			}
		</style>
	</head>
	<body>
		<div>Div1</div>
		<div>Div2</div>
		<div>Div3</div>
		<span>Span测试1</span>
		<span>Span测试2</span>
	</body>
</html>

效果：
在这里插入图片描述
通过上面的例子，我们可以看出，原本为块级元素的div标签，在display属性被设置为inline之后，我们对它的宽高属性的设置并没有生效，它表现得和行内元素一样，而span标签则正好相反。

浮动定位可以分为左浮动和右浮动，可以按字面理解为向左和向右浮动，通过浮动定位，我们就可以实现，让块级元素可以在一行内排列

当我们对标签设置浮动效果后，可以理解为，它会让出原本它占有的位置（相当于脱离了原本的dom流定位），根据设置的浮动为左浮动或右浮动而浮动到左上方或右上方，而它之后的元素，如果没有设置浮动，则会占据它原有的位置（在它的下方）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

最低0.47元/天解锁文章

Alicization~Iris

关注

0
点赞
踩
1

收藏

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

首先要知道两个概念：块级元素与行内元素1、常见的块级元素有：div、h、ul、li、p特点：①能够设置宽高（宽度如果不设置，默认为父容器的宽度）②独占（父容器）的一行，不能与其他元素并列2、常见的行内元素有：span、a、input、u、i、img特点：①不能设置宽高，默认宽高就是文字的宽度和高度②与其他行内元素可以并排但是我们在设计一个页面的时候通常想要一个元素既能够设置宽高，又能够与其他元素并排，这就要用到浮动定位了首先有一个小知识要知道，块级元素与行内元素的转换。通过对元素disp
复制链接

扫一扫