按钮浮动后点不了了？

事情是这样的，有一个列表页面，从上到下共有 3 个部分，头部是一个查询区域，查询区域下方是操作按钮区域，再下面是列表，像这样：

项目经理指着列表上方的空白说：“小王啊，这边的操作按钮就这几个，别换行了，直接放上面吧”，“可以，将它们靠右显示是吧？”我心想，那还不简单嘛，分分钟给你解决。

我原本以为调整一下 HTML 代码结构，再 float 一下就可以了，乍一看确实也实现了效果，但当我尝试去点击浮动后的按钮时，却发现光标移动到按钮上时“小手”没有出现，点击也没反应。

“奇怪了”，我皱了皱眉头，“我就浮动了一下，怎么按钮就点不了了呢？”“难道是需要清除浮动？”，抱着试一试的心态，我编写了清除浮动的样式代码：

.clearfix::after {
  content: "";
  display: block;
  clear: both;

  /* 兼容性 */
  visibility: hidden;
  height: 0;
}

然后在这个浮动元素的父元素上加上了 clearfix 这个 class，果然，按钮能正常点击了。但这是为啥呢？我估摸着是下面的列表造成的，于是打开控制台开始查看元素及其样式。我将问题的相关代码提取并简化如下：

<button onclick="alert('点击了新增按钮~')">新增</button>
<div class="box">
  <div class="content"></div>
</div>

button {
  float: left;
  cursor: pointer;
}

.box {
  position: relative;
}

.box .content {
  position: relative;
  height: 100px;
  background-color: rgb(163,187,219);
  clear: both;
}

上面的代码中，我对 button 元素设置了 float: left;，起初，并没有这行代码，效果也是正常的：

但当我加上 float: left; 后，就点击不了按钮了：

或许你已经发现问题出在哪了，是的，虽然 div.box 元素的直接子元素 div.content 元素设置了 clear: both; 清除浮动，让 div.content 元素移动到了在它之前的浮动元素（button）下面，但由于 div.content 元素的父元素（即按钮下面的 div.box 元素）没有清除浮动，而它又是定位元素（position 不为 static），定位元素默认情况下会层叠在浮动元素上面，最终导致虽然能看到按钮，但按钮上面其实被下面的定位元素盖住了，所以点击不到按钮。

我们可以通过给 div.box 元素设置背景进行验证：

.box {
  position: relative;
  background: rgb(230,119,98);
}

效果如下：

可以看到，按钮的确是被盖住了。

好了，知道了问题产生的原因，就可以对症下药了，这里提供两种解决方案：

• 方案一：清除浮动

  • 在 div.box 元素上清除浮动：

    .box {
      position: relative;
      clear: both;
    }
    

    或者给 button 元素再包裹一层，并在这一层上添加前面编写好的 clearfix 类（.clearfix::after）：

    <div class="clearfix">
      <button onclick="alert('点击了新增按钮~')">新增</button>
    </div>
    

• 方案二：修改 z-index

  • 修改 div.box 元素的 CSS 属性 z-index 的值，z-index 的默认值是 auto，相当于是 0，我们可以将其改小一点，比如改为 -1，这样定位元素 div.box 就会跑到按钮下面去了：

    .box {
      position: relative;
      z-index: -1;
    }
    

现在，就不存在按钮浮动后点不了的问题了

如果你还有其它想法，欢迎在评论区与我互动~