Question

我对为什么文本没有浮动浮动div有点困惑。这是一个例子：

＆＃13;

#placeholder {
  float: left;
  width: 12.5%;
  height: 113px;
  background: #000;
}

＆＃13;

<p>DIRECTIONS<br> Preheat oven to 400°F. Line a muffin tin. Set aside. In a stand mixer fitted with a paddle attachment, cream together butter and sugar until light and fluffy. Meanwhile, using a blender, puree the diced pears, milk, and almond extract until
  smooth.</p>
<div id="placeholder"></div>

＆＃13;

是因为浮动div是最后一个元素吗？我可以以某种方式实现这一点，但保留浮动div作为最后一个元素？谢谢！

Answer 1

你是说这个意思吗？我只是重新安排了两个要素的顺序。你的工作不起作用，因为p在浮动元素出现之前已经占据了整个宽度

#placeholder {
  float: left;
  width: 12.5%;
  height: 113px;
  background: #000;
}

<div id="placeholder"></div>
<p>DIRECTIONS<br> Preheat oven to 400°F. Line a muffin tin. Set aside. In a stand mixer fitted with a paddle attachment, cream together butter and sugar until light and fluffy. Meanwhile, using a blender, puree the diced pears, milk, and almond extract until
  smooth.</p>

或者，如果您确实要保留订单，请将float:right和width:87.5%添加到p元素。 87.5%来自将浮动div的宽度减去p元素的默认宽度（100%）

p {
  float: right;
  width:87.5%;
}

#placeholder {
  float: left;
  width: 12.5%;
  height: 113px;
  background: #000;
}

<div id="placeholder"></div>
<p>DIRECTIONS<br> Preheat oven to 400°F. Line a muffin tin. Set aside. In a stand mixer fitted with a paddle attachment, cream together butter and sugar until light and fluffy. Meanwhile, using a blender, puree the diced pears, milk, and almond extract until
  smooth.
</p>

注意：最好将clear:both添加到浮动div之后的下一个元素，以避免放置并发症

文本不包围浮动div

1 个答案: