分别漂浮在两侧，互不干扰

Question

我想使用 float 和 clear 属性装饰和塑造文本的左右边框。首先，我有这个标记，看起来左右楼梯都应该从页面顶部开始。但是，楼梯不是垂直对齐的；第二个楼梯似乎总是从另一边的倒数第二个台阶开始绘制。

<div style="float: left; clear: left; background: green;">Left</div>
<div style="float: left; clear: left; background: green;">Left Two</div>
<div style="float: left; clear: left; background: green;">Left Number Three</div>

<div style="float: right; clear: right; background: red;">Right</div>
<div style="float: right; clear: right; background: red;">Right Two</div>
<div style="float: right; clear: right; background: red;">Right Number Three</div>

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .

结果（在 Chrome + Firefox 中相同）：

我希望楼梯都从头开始，因为它们看起来应该是这样，因为我只清理它们所在一侧的浮标。请注意，我不仅塑造了边框，我还在塑造的侧面展示了重要的东西。

Answer 1

浮动元素不是独立于文档流定位的 - 它垂直放置在文档内部元素流中的前一个元素所在的位置（无论是块、浮动与否，还是内联内容）。

所以你要找的东西（内容浮动在其周围的浮动元素，但独立于文档流左右独立）基本上是不可能的。

编辑：

这是来自下面评论的代码，其中有一些较长的文字来说明我的意思：

div,
p {
  font-size: 24px;
  margin: 0;
  text-align: center;
}

<div style="float: left; clear: left; background: green;">Left</div>
<div style="float: right; clear: right; background: red;">Right</div>
<p>Some text in between</p>
<div style="float: left; clear: left; background: green;">Left Two</div>
<div style="float: right; clear: right; background: red;">Right Two</div>
<p>Some more text in between. Some more text in between,  in between,  in between. Some more text in between. </p>
<div style="float: left; clear: left; background: green;">Left Number Three</div>
<div style="float: right; clear: right; background: red;">Right Number Three</div>
<p>And again less text in between.</p>

所以像这样的解决方法只能在两者之间使用非常少量的 content/text（或 none）。（另请注意，我将 p 的 margin 设置为 0，否则 "steps" 之间会有空格。）

Answer 2

您可以通过清除最后 3 个项目上的 float 并使用 direction 来获得最后 3 个项目的正确对齐方式。

列表中的示例：

/* required */

.stairCcase {
  direction: rtl;
}

.stairCcase li {
  float: left;
  clear: left;
  direction: ltr;
}

.stairCcase :nth-child(3)~li {
  float: none;
  clear: none;
  display: table; /* or width:max-content instead display */
}


/* reset & styles for demo*/

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {
  width: 10em;
  margin: auto;
}

li {
  background: green;
  padding:0.25em;
}

li:nth-child(3)~li {
  background: red;
}

<ul class="stairCcase">
  <li>0 </li>
  <li>0 0 </li>
  <li> 0 0 0</li>
  <li>1</li>
  <li>1 1</li>
  <li>1 1 1</li>
</ul>

关于 float 的一些资源：https://css-tricks.com/?s=float&orderby=relevance&post_type=post%2Cpage%2Cguide & direction https://css-tricks.com/?s=direction&orderby=relevance&post_type=post%2Cpage%2Cguide

这样的布局，你应该考虑使用网格display。

下面的例子

ul {
  display: grid;
  grid-template-areas: 
  "left    .     .   .   .      .    right " 
  "left2 left2   .   .   .    right2 right2" 
  "left3 left3 left3 . right3 right3 right3"
}

li {
  grid-area: left;
  border:solid;
}

li:nth-child(2) {
  grid-area: left2
}

li:nth-child(3) {
  grid-area: left3
}

li:nth-child(4) {
  grid-area: right
}

li:nth-child(5) {
  grid-area: right2
}

li:nth-child(6) {
  grid-area: right3
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  counter-reset: lis
}

li:before {
  counter-increment: lis;
  content: counter(lis);
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

Answer 3

解决问题最简单的方法，只是为了改变这样的行：绿，红，绿，红，绿，红。此代码正常工作：

<div style="float: left; clear: left; background: green;">Left</div>
<div style="float: right; clear: right; background: red;">Right</div>
<div style="float: left; clear: left; background: green;">Left Two</div>
<div style="float: right; clear: right; background: red;">Right Two</div>
<div style="float: left; clear: left; background: green;">Left Number Three</div>
<div style="float: right; clear: right; background: red;">Right Number Three</div>

分别漂浮在两侧，互不干扰

Floating on both sides separately without interfering

html

css

css-float