flex容器中设置float后列表与文本展示位置与预期相反如何解决

• flex容器内float属性失效：你为.container设置了display: flex，属于flex布局，而flex布局的直接子元素（flex item）的float、clear属性会直接被浏览器忽略，你为p和ol设置的浮动规则完全不生效。flex默认按HTML元素的书写顺序从左到右排列，你的代码里书写顺序是ol→图片→p，所以渲染出来ol在最左侧、p在最右侧，和你的预期完全相反。
• HTML语法不规范：p标签属于短语内容容器，不允许嵌套h2这类块级标题元素，浏览器解析时会自动在h2标签前闭合p，导致你的DOM结构错乱，样式匹配异常。

方案1：沿用flex布局实现（推荐） #

flex本身就是为了这类横向排列场景设计的，不需要再用float，修改如下：

1. 修正HTML结构，把h2从p标签中移出，或者用div代替p包裹文本内容，同时可以选择调整元素书写顺序，或者通过order属性调整排列优先级。
2. 删除p和ol上的float、display: inline-block属性，flex子项不需要这类规则。

修正后的代码示例：

<div class="container">
  <!-- 文本块放在最前，默认排在最左侧 -->
  <div class="text-wrapper">
    <h2>some text just to see if this works.</h2>
  </div>
  <a href="#">
    <img src="https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_.jpg" alt="Game of Thrones" />
  </a>
  <ol dir="rtl">
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ol>
</div>

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between; /* 可选，让三个元素分散对齐 */
  gap: 20px; /* 可选，设置元素间间距 */
}

img {
  max-width: 200px;
  max-height: 200px;
  vertical-align: middle;
}

.text-wrapper {
  width: 30%; /* 可根据实际需求调整宽度 */
}

ol {
  width: 30%; /* 可根据实际需求调整宽度 */
}

如果不想调整HTML的书写顺序，可以给三个子元素加order属性调整排列顺序：

/* 数字越小排列越靠左 */
.text-wrapper {
  order: 1;
}
.container a {
  order: 2;
}
ol {
  order: 3;
}

方案2：改用float布局实现 #

如果需要用float实现，直接删除.container上的display: flex相关属性即可，浮动规则会正常生效，同时记得给父容器加清除浮动规则避免高度塌陷：

.container::after {
  content: "";
  display: block;
  clear: both;
}

内容的提问来源于stack exchange，提问作者MaROM