浮动和定位的逻辑属性

下表详细介绍了本指南中讨论的 逻辑属性 和值，以及它们的 物理属性 和值映射。它们假设水平 writing-mode，方向为从左到右。

逻辑属性或值	物理属性或值
float: inline-start	float: left
float: inline-end	float: right
clear: inline-start	clear: left
clear: inline-end	clear: right
inset-inline-start	left
inset-inline-end	right
inset-block-start	top
inset-block-end	bottom
text-align: start	text-align: left
text-align: end	text-align: right

除了这些映射属性外，还有一些其他简写属性可以通过能够处理块级和内联尺寸来实现。除了 inset 属性外，它们没有映射到物理属性。

逻辑属性	目的
inset-inline	同时设置以上两个内联尺寸的内边距值。
inset-block	同时设置以上两个块级尺寸的内边距值。
inset	同时设置所有四个内边距值，并具有多值物理映射。

与 float 和 clear 属性一起使用的物理值为 left、right 和 both。CSS 逻辑属性和值模块将值 inline-start 和 inline-end 定义为 left 和 right 的映射。

此示例有两个盒子——第一个盒子使用 float: left 浮动，第二个盒子使用 float: inline-start 浮动。如果将 writing-mode 更改为 vertical-rl 或将 direction 更改为 rtl，您将看到左浮动盒子始终粘贴在左侧，而 inline-start 浮动项目则跟随 direction 和 writing-mode。

CSS 定位通常允许我们以相对于其包含块的方式定位元素——我们本质上是相对于元素在正常流中所处位置对其进行内嵌。要相对于视口定位元素，请使用物理属性 top、right、bottom 和 left。当您希望定位与书写模式中的文本流相关时，请改用 inset-block-start、inset-block-end、inset-inline-start 和 inset-inline-end。

这些属性接受长度或百分比作为值，并与用户的屏幕尺寸相关。

在下面的示例中，inset-block-start 和 inset-inline-end 属性用于使用绝对定位在具有灰色虚线边框的区域内（该区域具有 position: relative）定位蓝色框。将 writing-mode 属性更改为 vertical-rl 或添加 direction: rtl，然后查看相对框如何保持与文本方向一致。

与模块中的其他属性一样，我们有简写属性，可以一次设置两个或四个值。

• inset — 使用物理映射一起设置所有四条边。
• inset-inline — 设置两个逻辑内联内边距。
• inset-block — 设置两个逻辑块内边距。

text-align 属性具有与文本方向相关的逻辑值——您可以使用 start 和 end 而不是使用 left 和 right。在下面的示例中，第一个块中设置了 text-align: right，第二个块中设置了 text-align: end。

如果将 direction 的值更改为 rtl，您会看到第一个块的对齐方式保持在右侧，但第二个块的对齐方式会到左侧的逻辑末尾。

当使用使用开始和结束而不是物理方向进行对齐的框对齐时，这可以更一致地工作。