如何排列<按钮>所以它在textarea之后不会中断？

Question

假设我有一个包含姓名、电子邮件和消息的表单。然而，我的“发送消息”按钮损坏了，并且在文本区域之后没有对齐，而是在文本区域和最后一个输入之间对齐！我做错了什么？

我的 HTML 表单片段是：

<form class="form-contact">
<div class="labels">
<label for="name">Name:</label><input name="name" type="text" />
<label>Email:</label><input name="name" type="text" />
<label>Message:</label><textarea name="name" type="text"></textarea>
<button>send</button>
</div>
</form>

我的 CSS 是：

.form-contact { 
    width:100%;
    margin:auto; 
}
label { 
    text-align:right;
    width:300px;
    float:left; 
    font-size:24px; 
    margin-top:27px; }
.labels {
    margin-top:36px;
    float:
}
form { 
    display:inline; 
    margin:0; 
}
input {
    float:left; 
    margin-top:28px; 
    margin-left:27px; 
    height:23px; 
    line-height:23px;
    font-size:23px; 
    color:#01a4c0; 
    width:309px; 
}
textarea { 
    float:left;
    margin-top:28px;
    margin-left:27px;
    height:23px;
    line-height:23px; 
    font-size:23px;
    color:#01a4c0;
    width:309px; 
    height:134px;
}
button {
    width:88px; 
    height:29px; 
    border:none; 
    background:#01a4c0; 
    color:#FFF; 
    font-size:22px; 
    text-align:center;
    float:left; 
    cursor:pointer; 
    margin-top:13px; 
    display: block;
}

Answer 1

使用 clear:both;

<button style="clear:both">send</button>

查看 http://jsfiddle.net/yzK2k/