Javascript Div不'；不要在另一个对象下面发送对象

请检查此代码笔：

---

使用float for.box时，我希望这些框只能向左浮动。令我惊讶的是，单独div中的按钮也向左浮动到了框中。我做错了什么

而不是

浮动：左您应该使用css

另外，
行
不是有效的html属性。：）


.box{
背景：紫色；
宽度：100px；
高度：100px；
显示：内联块；
利润率：10px；
颜色：白色；
文本对齐：居中；
}
#容器{
最大宽度：40%；
保证金：0自动；
}

框1
框2
框3
点击我
而不是
浮动：左您应该使用css

另外，
行
不是有效的html属性。：）


.box{
背景：紫色；
宽度：100px；
高度：100px；
显示：内联块；
利润率：10px；
颜色：白色；
文本对齐：居中；
}
#容器{
最大宽度：40%；
保证金：0自动；
}

框1
框2
框3
点击我
您需要在问题中添加一个，而不是添加到非现场代码的链接。您需要在问题中添加一个，而不是添加到非现场代码的链接。哇！！非常感谢你。但我仍然不明白为什么当我在框中输入按钮时，float会应用到按钮上！！非常感谢你。但是当我在box类中输入按钮时，我仍然不明白为什么float会应用于按钮
<div row id="container">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
<div>
<button>Click Me</button>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="effects.js"></script>

    .box {
    background: purple;
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    color: white;
    text-align: center;
}

#container {
    max-width: 40%;
    margin: 0 auto;
}

display: inline-block;