Css 为什么标签在输入框后面？

即使在摆弄了float变量之后，我似乎也无法理解这一点。 “Q1”出现在标签后面：/

<div class="question active">Q1<input id="one" type="text"></div>


.question {
    display: none;
    float:left
}
.question.active,.question.answered {
    display: block;
    float: left;
    clear: left;

}
.question.active input {
    border: 1px solid black;
    float: left;
    clear: left;
}
.question.answered input {
    border: 0px solid black;
    float: left;
}
.button {
    display: none;
}
.button.active {
    display: block;
    float: left;
}
.clickbutton {
    clear: left;
    float: left;
}

.focusField{
    border:solid 2px #73A6FF;
    background:#EFF5FF;
    color:#000;
}

Q1
.问题{
显示：无；
浮动：左
}
.question.active、.question.answered{
显示：块；
浮动：左；
清除：左；
}
.问题.主动输入{
边框：1px纯黑；
浮动：左；
清除：左；
}
.问题.已回答的输入{
边框：0px纯黑；
浮动：左；
}
.按钮{
显示：无；
}
.button.active{
显示：块；
浮动：左；
}
.点击按钮{
清除：左；
浮动：左；
}
.福克斯菲尔德{
边框：实心2px#73A6FF；
背景：#EFF5FF；
颜色：#000；
}

---

非常感谢：）

您的

输入是
浮动的
左侧

.question.active input {
    border: 1px solid black;
    float: left;
    clear: left;
}

这会将其置于
.question.active div
中的文本之前

如果您将Q1放在
标签中，然后先将其向左浮动，那么一切都会成功。
我实际上希望在标记中有
元素。标签到底是什么？或者更好的是，根本不要浮动输入元素。只浮动它所居住的潜水舱；div的所有内容都将随其浮动。