为什么赢了'；t此html中的第一个div显示为一列，与html的其余部分相邻，即float:right

为什么这个html中的第一个div不显示为float格式的html其余部分旁边的一列：对吗

<div style="padding-top:20px; float:left; width:50%; clear:both">Column 1</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
  <label for="title">
    <h3 style="text-align:left">Column 2</h3>
  </label>
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
  <input type="text" maxlength="255" value="">
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
  <label for="body">
    <h3 style="text-align:left">Column 2</h3>
  </label>
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width:50%; float:right; clear:both;">
  <textarea maxlength="60000"></textarea>
</div>

第1列
第2栏
第2栏

第1列线迫使第2列向下，如下所示：

---

方框的填充增加了其总宽度

应用了以下CSS的框：

.box {
    width: 50px;
    padding: 50px;
}

将是150像素宽

---

---

由于您正在向列中添加填充，因此它们的宽度实际上超过了50%，不能再放在同一行中。

您应该将css与html分开。那就试试类似的东西

#col1{
  float:left;
  width:50%;
{

#col2{
 float:left;
 width:50%
}

使用宽度%、左键或右键进行游戏。使用这些div：

<div id="col1"></div>
<div id="col2"></div>

即使删除了所有填充，也会得到相同的结果：您的列上有

清除：两个

，这不允许其他元素出现在其行上。请参见此处，删除该选项：