html - CSS:如何清除 float 对象只有一层，而不是一直到左边？

Question

我不确定我描述的是否正确。我想要清除所有 float 对象中的一个对象，但不是一直到左边。

JSfiddle

#parent {
  background: greenyellow;
  width: 500px;
  height: 700px;
  padding: 15px;
}
#parent>div {
  float: left;
}
#object1 {
  width: 40px;
  height: 300px;
  background: blue;
}
#object2 {
  width: 100px;
  height: 100px;
  background: red;
}
#object3 {
  width: 100px;
  height: 100px;
  background: purple;
}

<div id="parent">

  <div id="object1">


  </div>
  <div id="object2">

  </div>
  <div id="object3">
  </div>

</div>

如在 jsfiddle 中。我希望紫色框位于红色框下方。不，我不想减少我 parent 的宽度。我不想在 div 中包含红色和紫色。

有没有办法。谢谢？

Answer 1

将下宽度设置为父级，

#parent {width: 200px;}

http://jsfiddle.net/db0xacps/1/

或者包装正确的元素，样式将与您的样式相同。

<div id="parent">
     <div id="object1"></div>  
     <div>
         <div id="object2"></div>
         <div id="object3"></div>
    </div>
</div>

http://jsfiddle.net/db0xacps/2/