使用float属性实现两个div并排失败，求解决方案（禁用Flexbox/Grid）

我跟着教程尝试用float属性让网页中的两个div并排显示，但没达到预期效果。说明一下：我正在学习float布局，因此不希望使用Flexbox或Grid布局。

期望效果：

实际效果：

我的HTML和CSS代码如下：

CSS代码 #

body {background-color: #fff;}
h1 {color: lightsalmon;text-align: center;}
.float-container {border: 3px solid #fff;padding: 20px;}
.float-container img {height: 100%;width: 100%;}
.float-container p {color: brown;font-size: large;text-align: center;}
.float-child {width: 49%;float: left;padding: 20px;border: 5px solid salmon;}

HTML代码 #

<h1>Lasagna</h1>
<div class="float-container">
  <img src="images/lasagna.jpg" alt="Lasagna">
  <p>This classic lasagna recipe features a meaty sauce layered with noodles and cheese. It’s perfect for feeding a crowd or freezing for later.</p>
  <div class="float-child">
    <div class="first">
      <h3>Ingredients</h3>
      <ul>
        <li>1 pound lean ground beef</li>
        <li>1 egg (beaten)</li>
        <li>15 ounces part-skim ricotta cheese</li>
        <li>¼ cup fresh parsley (chopped)</li>
        <li>2 ½ cups shredded low-moisture part-skim mozzarella cheese (divided)</li>
        <li>½ cup grated Parmesan cheese (divided)</li>
        <li>24 ounces CLASSICO Tomato And Basil Pasta Sauce</li>
        <li>1 cup water</li>
        <li>12 lasagna noodles (uncooked)</li>
      </ul>
    </div>
  </div>
  <div class="float-child">
    <div class="second">
      <h3>Steps</h3>
      <ol>
        <li>Heat oven to 350°F.</li>
        <li>Brown meat in large skillet on medium-high heat. Meanwhile, combine egg, ricotta, parsley, 1-1/4 cups mozzarella and 1/4 cup Parmesan.</li>
        <li>Drain meat; return to skillet. Stir in pasta sauce. Add 1 cup water to empty sauce jar; cover with lid and shake well. Add to meat mixture; stir until blended.</li>
        <li>Spread 1 cup meat sauce onto bottom of 13x9-inch baking dish sprayed with cooking spray; top with layers of 3 lasagna noodles, 1/3 of the ricotta mixture and 1 cup of the remaining meat sauce. Repeat layers twice. Top with remaining noodles, meat sauce and cheeses. Cover with foil sprayed with cooking spray.</li>
        <li>Bake 1 hour or until heated through, removing foil after 45 min. Let stand 15 min. before cutting to serve.</li>
      </ol>
    </div>
  </div>
</div>

解决方法 #

问题出在两个核心点：

1. 盒模型宽度溢出：默认box-sizing: content-box规则下，元素的width仅计算内容宽度，padding和border会额外增加总宽度。你的.float-child设置了width:49%，加上padding:20px和border:5px，总宽度会超过49%，两个元素加起来就超出了容器宽度，导致第二个div被挤到下一行。

2. 浮动容器高度塌陷：浮动元素脱离常规文档流，父容器.float-container无法自动包裹住它们，可能引发后续布局混乱。

调整方案：

步骤1：全局设置盒模型为border-box #

在CSS最顶部添加以下代码，让所有元素的width包含padding和border，确保宽度计算准确：

* {
  box-sizing: border-box;
}

步骤2：给浮动容器添加clearfix解决高度塌陷 #

给.float-container添加伪元素清除浮动，让容器能正确包裹内部的浮动元素：

.float-container::after {
  content: "";
  display: table;
  clear: both;
}

调整后的完整CSS代码：

* {
  box-sizing: border-box;
}
body {background-color: #fff;}
h1 {color: lightsalmon;text-align: center;}
.float-container {
  border: 3px solid #fff;
  padding: 20px;
}
.float-container::after {
  content: "";
  display: table;
  clear: both;
}
.float-container img {height: 100%;width: 100%;}
.float-container p {color: brown;font-size: large;text-align: center;}
.float-child {
  width: 49%;
  float: left;
  padding: 20px;
  border: 5px solid salmon;
}

完成调整后，两个div就能正常并排显示，同时容器也能正确包裹内部元素。

内容的提问来源于stack exchange，提问作者Sackr1