时间戳

首页 > 解决方案 > 为什么当行上没有更多空间时浮动元素被推到容器外面而不是被推到第二行？

html - 为什么当行上没有更多空间时浮动元素被推到容器外面而不是被推到第二行？

问题描述

blockquote {
  background-color: lightblue;
  width: 410px;
  height: 400px;
}

blockquote p {
  float: ;
  margin: 0;
  padding: 0;
  display: inline-block;
  background-color: red;
}

blockquote img {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
}
<blockquote>
  <img src="https://socialbrew.dk/wp-content/uploads/2020/06/171026-better-coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-760w-1.jpg">
  <p>I love to drink Coffee</p>
  <p>Cofee is the nectar of life</p>
</blockquote>

在这个例子中，这两个p不是浮动的。他们现在是inline-block，和他们的普通医生。flow 将在 旁边对齐img，但不是在容器的顶部，而是在容器的底部。现在，如果我width将容器的 缩小到400px，第二个p将被推到第二行，第二行从左侧开始，位于图像下方。所以第二个p被安排在第二行的图像下方。

但是，如果我不缩小width，而是浮动两个p，它们都将提升到容器的右上角，现在，如果我再次将容器的宽度缩小到400px，第二个p出现被推到容器外，而不是被推到第二行，但是，当两个“p”都浮动在顶部时，它们在DOM中的实际订单位置不可能在底部容器，所以一旦容器变小了，第二个p就被推到第二行，它在图像下方并超过容器，并且由于它是浮动的，它被提升到容器的右侧。

唯一的问题是，我不确定也不知道这是否是浮动的工作方式。当两者p都浮动在容器的右上角时，它们的实际DOM流顺序是在容器底部，只是给人一种整个容器是空的假象，或者是它们在容器顶部的顺序在哪里他们真的出现了吗？

标签： htmlcss

解决方案

当时您没有设置它width的p自动由其中的内容或文本确定，如果您将width容器缩小为400px并缩小里面的文本p将继续对齐内联以下是示例

blockquote {
  background-color: lightblue;
  width: 400px;
  height: 400px;
}

blockquote p {
  margin: 0;
  padding: 0;
  float: ;
  display: inline-block;
  background-color: red;
}

blockquote img {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
}
<blockquote>
  <img src="https://socialbrew.dk/wp-content/uploads/2020/06/171026-better-coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-760w-1.jpg">
  <p>I love to drink Coffee</p>
  <p>Cofee is the nectar</p>
</blockquote>
如您所见，尽管我将其容器p设置为，但仍然在同一行上，这意味着在您的示例中，两个的大小大于容器宽度的左侧大小。width400pxp

尝试ctrl + shift + I在浏览器中使用开发人员工具（如果您使用的是 chrome）来检测这里的样式是宽度的照片，p即使您没有设置它第二个 p 的宽度 ，因为您可以看到第二个的宽度p是162.156px但您没有设置这意味着它实际上是由文本的长度决定的。

你问的第二个高度p是因为当你自动浮动内容时，它会走到一边，你把它浮动在顶部，如果你不浮动它，它会留下等于imgfrom高度的大小但是top如果您将高度设置img为0px将p转到顶部以下是示例

blockquote {
  background-color: lightblue;
  width: 410px;
  height: 400px;
}

blockquote p {
  margin: 0;
  padding: 0;
  float: ;
  display: inline-block;
  background-color: red;
}

blockquote img {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 0;
}
<blockquote>
  <img src="https://socialbrew.dk/wp-content/uploads/2020/06/171026-better-coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-760w-1.jpg">
  <p>I love to drink Coffee</p>
  <p>Cofee is the nectar of life</p>
</blockquote>

推荐阅读