HTML/CSS <div> 不会低于另一个

Question

我有这个页面，其中所有的 div 似乎都可以工作，然后突然间我的最后一个坏了。我的 CSS 中有两个 div，一个在 centeredRight 中，一个在 centeredLeft 中。它们排在页面下方。但是我左边的最后一个 div 似乎被推到了右边。

这是我的 CSS。

.centeredlistleft {
    width: 300px;
    margin: 0 auto;
    text-align: left;
    border: 2px solid;
    float: left;
    margin-bottom: 25px;
    padding-right: 10px;
}

.centeredlistright {
    width: 300px;
    margin: 0 auto;
    text-align: left;
    border: 2px solid;
    float: right;
    margin-bottom: 25px;
    padding-right: 10px;
}

.body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: purple;
    background-color: pink;
}

这是我的 HTML。

<div id="sandrcontainer" class="body" style="width:700px">
   <div id="onsieforbaby" class="centeredlistleft" >
      <h3> Onesie for Baby </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$10.00</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li>It's a boy onesie for a new baby boy. Carter onesies are used. Can ask for specific size. Can also make one for girls using pink.</li>
            </ul>
         </li>
      </ul>
   </div>
   <div id="largetennistowel" class="centeredlistright">
      <h3> Large Tennis Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$14.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>16 x 26 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> Cotton fleece. Very soft. Washes Well. Can be personalized. Check out the photo gallery for examples. Ask seller what color towels are available at time of order.</li>
            </ul>
         </li>
      </ul>
   </div>
</div>
<div id="sandrcontainer2" class="body" style="width:700px">
   <div id="largegolftowel" class="centeredlistleft">
      <h3> Large Golf Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$14.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>16 x 26 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> Golf towel. Elegant. Large white towel. Cotton fleece. Very soft. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order. This towel has a grommet and can be hung on golf bags. Could also make this on fingertipe towel for guest bath or on linen towel for that elegant look.</li>
            </ul>
         </li>
      </ul>
   </div>
   <div id="terrysmalltowel" class="centeredlistright">
      <h3> Terry Small Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$11.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>11 x 18 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> With fringe. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order.</li>
            </ul>
         </li>
      </ul>
   </div>
</div>
<div id="sandrcontainer3" class="body" style="width:700px">
   <div id="contactmerands" class="centeredlistleft" >
      <p> Please make sure to send me an email before any orders. I may not have the color towel you want but can always order more </p>
   </div>
   <div id="smallfingertip" class="centeredlistright" >
      <h3> Small Fintertip Holiday Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$11.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>11 x 18 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> Terry small towel with decorated cat for xmas. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are available at time of order.</li>
            </ul>
         </li>
      </ul>
   </div>
</div>

TLDR - ctrl f 代表“Contactmerands”，请向我解释为什么这个盒子被推到大高尔夫毛巾盒的右下角。它应该像其他 div 一样出现在大型高尔夫球毛巾盒下方。

如果您想了解我的意思，您可以访问我的学校门户网站，我在其中发布了页面 HERE .

Answer 1

当元素 float 时，它基本上从文档流中移除。因此，当父元素的子元素全部 float 时，父元素会自行折叠，因为它没有任何定义的尺寸。

要解决这个问题，您可以在父元素上设置 overflow:hidden 或 overflow:auto。这实质上是强制它包含子元素，从而防止它折叠。

添加下面的CSS，你的问题就解决了:

#sandrcontainer,
#sandrcontainer2,
#sandrcontainer3 {
    overflow: hidden;
}

---

有时更改 overflow 属性会与现有 CSS 冲突。您也可以使用伪元素 clearfix:

.clearfix:after {
    content: '';
    clear: both;
    display: table;
}