解决vue中给button按钮添加点击事件，事件不生效问题。

解决vue中给button按钮添加点击事件，事件不生效问题。

话不多说，直接切入正题：

我们在开发中是不是经常会遇到给button或者input添加click事件，但是methods中却不走这个事件的问题呢？
我找了很多文档，跟button本身是没有关系的。

话不多说 看代码：

 <div class="parentbox">
      <div class="childbox">
        <button @click="addEvent">测试</button>
        <button></button>
        <button></button>
      </div>
    </div>

重点来了！！

 .parentbox{
    background: #0076ff;
    /* 给父元素一个背景色 方便对比父子元素的嵌套关系 */
  }
.childbox{
    float: left;
    /* 设置为左浮动 但此时box没有固定宽高 浮动布局中根据按钮button自动撑开 */
  }
 

这个时候给button加上点击事件 @click addEvent

methods:{
 addEvent(){
      console("111111111111","---------")
    }
}

• 本人亲测 chrome浏览器 console 台根本不能输出任何 信息！点击事件完全失效！！。

原因：浮动的div将子元素button包裹，浏览器无法将其识别为有效宽高的元素，自然找不到你要给谁添加点击事件。。

解决的办法是：

！给父元素div清除浮动！！！1

至于怎么清除浮动就不论述了…
(本人直接来一个 overflow:hidden干净利索)