CSS display: flex； 与 float:right/left冲突

问题描述

在div里写几个span标签，想要“查看申请记录”浮动到最右侧，css 设置元素 float 不起作用

影响原因

影响元素 float 样式的因素会有很多，这里提两个：

• 父级元素设置 display：flex，会使子元素的 float 失效
• 检查元素有没有因为需要设置超出省略而设置 display: -webkit-box; 也会使元素的 float 失效

  <div class="title">
      <h4>申请状态</h4>
      <span>成功</span>
      <span>失败</span>
      <span>查看申请记录</span>
  </div>


.title {
  display: flex;
  line-height: 36px;
  margin: 0 0 20px 0;
}
.title span {
  margin-left: 30px;
  color: red;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

解决方案

使用CSS定位属性----position

在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位的，虽然给父元素的position设置relative、absolute、fixed都可以，但是如果不希望父元素脱标，常用解决方案是：（子绝父相）

• 子元素设置position: absolute;
• 父元素设置position: relative;（让父元素成为定位元素，又不脱离标准流）；

  <div class="title">
      <h4>申请状态</h4>
      <span>成功</span>
      <span>失败</span>
      <span style="display:inline-block;position:absolute;right:20px;">查看申请记录</span>
  </div>


.title {
  display: flex;
  line-height: 36px;
  margin: 0 0 20px 0;
  position:relative;
}
.title span {
  margin-left: 30px;
  color: red;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}