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

逻辑属性与逻辑值规范包含了 float 和 clear 的实体值的逻辑对应关系，以及用于定位布局的定位属性的逻辑对应关系。本指南介绍如何使用这些对应关系。

属性的和值的对应关系

下表详列了本指南所论述的属性和值，以及其实体对应关系。假设书写模式（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 变动。

html

<div class="container">
  <div class="inner">
    <div class="physical box"></div>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale.
  </div>
  <div class="inner">
    <div class="logical box"></div>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale.
  </div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}

.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  margin: 10px;
  width: 100px;
  height: 100px;
}

css

.inner {
  /* direction: rtl; */
  /* writing-mode: vertical-rl; */
}

.physical {
  float: left;
}

.logical {
  float: inline-start;
}

示例：定位布局的偏移属性

定位通常可以让我们相对于元素的包含块放置元素——我们就是参照元素在正常流里的位置给元素设置偏移。过去我们用实体属性 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，看看相对于流的盒子是怎么根据文本方向保持位置的。

html

<div class="container">
  <div class="inner">
    <div class="physical box"></div>
  </div>
  <div class="inner">
    <div class="logical box"></div>
  </div>
</div>

.container {
  display: flex;
}

.inner {
  width: 200px;
  height: 200px;
  position: relative;
  border: 2px dotted grey;
}

.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  width: 100px;
  height: 100px;
}

css

.inner {
  writing-mode: horizontal-tb;
}

.physical {
  position: absolute;
  top: 20px;
  right: 0;
}

.logical {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 0;
}

新的二值和四值简写属性

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

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

示例：text-align 的逻辑值

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

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

html

<div class="container">
  <div class="inner physical">Aligned text</div>
  <div class="inner logical">Aligned text</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  display: flex;
}

.inner {
  width: 200px;
  border: 2px dotted grey;
  padding: 10px;
}

css

.inner {
  direction: ltr;
}

.physical {
  text-align: right;
}

.logical {
  text-align: end;
}

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