千家信息网

CSS定位机制中的浮动种类有哪些

发表于:2025-01-17 作者:千家信息网编辑
千家信息网最后更新 2025年01月17日,这篇文章给大家分享的是有关CSS定位机制中的浮动种类有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。接下来讲解一
千家信息网最后更新 2025年01月17日CSS定位机制中的浮动种类有哪些

这篇文章给大家分享的是有关CSS定位机制中的浮动种类有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。接下来讲解一下浮动的定位代码。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

1.当都不设置浮动时:

</span>浮动<span>

box1

box2

box3

css——定位

2.当设置box1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了box1 2,使box12 从视图中消失。

</span>不设置浮动<span>

box1

box2

box3

css——定位

3.当都设置为浮动时,box1 向左浮动直到碰到包含框,另外两个box向左浮动直到碰到前一个浮动框。

</span>不设置浮动<span>

box1

box2

box3

css——定位

4.清除浮动,要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 leftrightbothnone,它表示框的哪些边不应该挨着浮动框。

感谢各位的阅读!关于"CSS定位机制中的浮动种类有哪些"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

0