float:left 更改下一个 div 的大小

Question

我正在练习 css 盒子模型。

这是 html 和 css 代码：

.box {
  width: 100px;
  height: 100px;
}

#first {
  background: red;
}

#second {
  background: blue;
}

#third {
  background: green;
}

<div class="box" id="first">box 1</div>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae nostrum aliquid, ullam delectus placeat quo, nam dignissimos minus eum hic ducimus sint commodi dolorum dolores eaque velit laboriosam ipsa perspiciatis.
</p>
<div class="box" id="second">box 2</div>
<div class="box" id="third">box 3</div>

这是它的样子：

enter image description here

当我将 float:left 添加到第一个框时：

#first {
        background: red;
        float: left;
      }

为什么第二个框的大小在变化？

.box {
  width: 100px;
  height: 100px;
}

#first {
  float: left;
  background: red;
}

#second {
  background: blue;
}

#third {
  background: green;
}

<div class="box" id="first">box 1</div>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae nostrum aliquid, ullam delectus placeat quo, nam dignissimos minus eum hic ducimus sint commodi dolorum dolores eaque velit laboriosam ipsa perspiciatis.
</p>
<div class="box" id="second">box 2</div>
<div class="box" id="third">box 3</div>

enter image description here

Answer 1

好的，所以任何未清除的元素都将被移动到浮动的 space 中，对于方框，这可能是一个错误，但也是因为它们未被清除并且无处可去去，这里是通过添加 clear: both; 到 .box class 在 css.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>...</title>
    <style>
      body {
        margin: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        clear: both;
      }

      #first {
        background: red;
        float: left;
    
    }
      #second {
        background: blue;
      }
      #third {
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="box" id="first">box 1</div>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae nostrum
      aliquid, ullam delectus placeat quo, nam dignissimos minus eum hic ducimus
      sint commodi dolorum dolores eaque velit laboriosam ipsa perspiciatis.
    </p>
    <div class="box" id="second">box 2</div>
    <div class="box" id="third">box 3</div>
  </body>
</html>

float:left 更改下一个 div 的大小

float:left changes the size of next div

html

css

css-float