设置float后，按钮遇上position: relative点击失效_button float 之后无法点击-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43915401/article/details/129400326

当将button浮动到右边后，由于下方div的relative定位导致覆盖了button，使得button的onClick事件无法触发。解决方法是在div上添加clear:both样式，以避免覆盖并恢复button的可点击性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 问题：设置button浮动到右边之后，button上的onClick事件无法触发

在这里插入图片描述
"点击"按钮点不了

2 原因：button浮动到右边之后，下面的div填补上来，但是下面的div设置了`position: relative`，结果下面的div直接覆盖了button，无法点击button

在这里插入图片描述
"表格内容"的div直接覆盖了button

解决方案：清除浮动`clear:both`

在这里插入图片描述
给"表格内容"的div加上clear:both样式后，div就不会覆盖button了。

4 示例

<!-- 网页中是用react和antd，看content中的内容就好了 -->
<html>

<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.6/antd.min.js"
        integrity="sha512-Pn2PLpM5OByFVBBfe517wK9LQCCbQsM4sVl7y3yHDCpHL/X/k6st3cre9SUiopZrbBiOQiSDgvKMOagM6MWCnA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.6/antd.min.css"
        integrity="sha512-GKJ7hcKFof/Chhk79mhxA8egInBxwypeeD9sF/fAlTJ75n0YvjQ8mSofBD7KahRnMTzdtUFF5+YWjnXTew8Y0w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const e = React.createElement;
    const content = () => {
        return <div>
            <div className="buttons">
                <antd.Button
                    onClick={() => {
                        console.log(111)
                    }}>
                    点击
                </antd.Button>
            </div>

            <div className="table" style={{ height: "40px", backgroundColor: "#e6f7ff" }}>
                表格内容
            </div>
        </div>
    }
    const domContainer = document.querySelector('#root');
    ReactDOM.render(e(content), domContainer);
</script>

</html>

没有浮动和定位的时候
在这里插入图片描述
antd.Button加上float: right，浮动元素所在浮动流在标准流之上，所以能看到button在div上方，这时候点击button依然有效

div.table加上position: relative，div直接覆盖button，所以无法点击button

div.table加上clear: both，清除浮动，button又显示出来了
在这里插入图片描述