浮动与定位

最新推荐文章于 2022-06-27 17:53:44 发布

三旬梦

最新推荐文章于 2022-06-27 17:53:44 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/qq_43591348/article/details/96623305

版权

浮动

定义：float是css样式中的定位属性，用于设置标签对象（如<div>标签盒子、<span>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

性质：

(1) 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；

（以同级元素为例）如图：
在这里插入图片描述
运行结果：

可以看出第二个块元素以100像素的上边距相对于第一个块元素浮动。

（以父元素为例）如图：
在这里插入图片描述
运行结果：

从图中可看到子元素以上边距50像素相对父元素向右浮动。

(2) 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐（局限于其元素宽度），但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐；

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

块2的背景因块1的浮动而被盖住，块2里的内容无法被覆盖，如上图多出来的文本“ 2 ”。

(3) 浮动元素后面的内联元素会向此浮动元素的外边距靠齐；

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

内联元素span向浮动元素div的右外边距靠齐。

(4) 元素设置为浮动之后，就生成一个块级框（display:inline-block），没必要再声明display:block，可以设置宽高。

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

<span>元素本是行内元素，不可以设置宽和高，但通过浮动之后，变为了inline-block(行内块级元素)，具有行内元素的自动换行以及块级的可以设置宽高的属性。

特点：

(1) 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（padding的内边） 或 另一个浮动框的边框为止。
(2) 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当一部分元素浮动时，因其脱离文档流，可能会覆盖掉其他元素；
当元素全部浮动时，取决于父元素的宽度；若窄，则浮动块会向下移动，直至可以被放下；若浮动块高度不同则会被卡住。

应用：

---------浮动属性产生之初是为了实现“文字环绕”的效果，现成为常见的页面布局方式。

示例：文本环绕

如图：
在这里插入图片描述

运行结果：

在这里插入图片描述
由图中可以看出，文本随着图片的浮动而对它进行环绕。
注意：若这里不给父级元素定高，浮动元素（图片及文本）因脱离了文档流而无法将父级元素撑开，导致父元素高度坍塌。这里就需要清除浮动。

示例：常见布局方式（例如：左边定宽，右边自适应）

如图：
在这里插入图片描述
左边定宽为200像素，右边通过margin-left将.left盒子空间给出，然后右侧可通过块元素的流体特性布局。

其他又如水平菜单等

清除浮动：

法一：clear
取值为left、right、both、none
属性：属性规定元素的哪一侧不允许其他浮动元素。

一般通过添加空元素来清除浮动

<head>
	<style>
		.clear{
				clear:both;
			}
	</style>
</head>
<body>
	<div class="clear"></div>
</body>

缺点：添加了代码长度，以及无意义的标记。

2.法二：伪元素after
注意：after用于浮动元素父级

使用方法(假设div#in标签使用了浮动，它的父元素为div#out）

.#out::after{
			content:"";
			display:block;
			clear:both;
			}

推荐使用

3.法三：通过触发bfc（父元素生成）

使用方法(假设div#in标签使用了浮动，它的父元素为div#out）

#out{
		overflow:hidden;
	}

这种方法只是其中一种，有很多的触发bfc的方法，后续再做整理。

定位

定义：建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position的取值：

absolute(绝对定位)

定义：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
特性：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。并将任何元素可变为块级元素。
具体描述：相对于其最接近的一个具有定位属性的祖先元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。
属性：left、right、top、bottom

示例：

运行结果：

由运行结果可以看到设置了绝对定位后，span标签具有了宽高的特性，变为了块级元素标签，同时也可得到，绝对定位可以使元素从文档流中删除，不占据空间。
relative(相对定位）

定义：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
特性:相对于初始位置进行定位。
属性：left、right、top、bottom

fixed(固定定位)

特性：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
具体描述：指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。
属性：left、right、top、bottom

static(静态定位)

定义：默认值。没有定位，元素出现在正常的流中。
属性：不受top，bottom,left,right的影响

z-index属性(值较大的在离用户更近的地方显示)来控制这些框的堆放次序。
z-index只能在position属性值为relative或absolute或fixed的元素上有效。

三旬梦

关注

0
点赞
踩
0

收藏

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

浮动定义：float是css样式中的定位属性，用于设置标签对象（如<div>标签盒子、<span>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。性质：(1) 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；（以同级元素为例）如图：...
复制链接

扫一扫