用于浮动和定位的逻辑属性

下表详列了本指南所论述的属性和值，以及其实体对应关系。假设书写模式（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。逻辑属性规范定义 inline-start 和 inline-end 值对应于 left 和 right。

在下面的例子里，我有两个盒子——第一个用 float: left 设置了浮动，第二个用了 float: inline-start。如果把 writing-mode 改成 vertical-rl 或者把 direction 改成 rtl，你会看到浮动到左侧的盒子总是贴在左侧，而浮动到 inline-start 的元素随着 direction 和 writing-mode 变动。

定位通常可以让我们相对于元素的包含块放置元素——我们就是参照元素在正常流里的位置给元素设置偏移。过去我们用实体属性 top、right、bottom 和 left 做这件事。

这些属性的取值是长度或百分比，而且参照的是用户屏幕的尺度。

逻辑属性规范创造了新的属性，你可以用来在你的书写模式里参照文本的流向定位。这些属性有：inset-block-start、inset-block-end、inset-inline-start 和 inset-inline-end。

在下面的例子里，带灰色点状边框的区域设置了 position: relative。为了在这个区域里用绝对定位放置蓝色盒子，我用了 inset-block-start 和 inset-inline-end 属性。把 writing-mode 属性改成 vertical-rl，或者加上 direction: rtl，看看相对于流的盒子是怎么根据文本方向保持位置的。

和规范里的其他属性一样，我们也有新的简写属性可以同时设置两个或者四个值。

• inset——使用实体对应关系同时设置四边。
• inset-inline——设置两个逻辑行向偏移。
• inset-block——设置两个逻辑块向偏移。

text-align 属性有参照文本方向的逻辑值——我们可以不用 left 和 right 而用 start 和 end。在下面的例子里，我在第一个块里设置了 text-align: right，在第二个里设置了 text-align: end。

如果把 direction 改成 rtl，你会看到第一个块还是右对齐的，但是第二个跑到了在左边的逻辑行末。

相比用实体方向对齐，在使用盒对齐的时候用首和末得到的效果更一致。