HTML/CSS 使用 `` 和 `float` 对齐图像

Question

我正在学习如何使用 float 对齐图像在 CSS 中。下面显示了我在书中学到的关于此属性的示例。

img.align-left {
    float: left;
    margin-right: 10px;
}
img.align-right {
    float: right;
    margin-left: 10px;
}
img.medium {
    width: 250px;
    height: 250px;
}

<p><img src="https://image.ibb.co/dAnvmk/magnolia_medium.jpg" alt="Magnolia" class="align-left medium" />
    <b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p>
<p><img src="https://image.ibb.co/dAnvmk/magnolia_medium.jpg" alt="Magnolia" class="align-right medium">
    Some magnolias, such as <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open. Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p>
   

这是我预期的结果，如本书教程所示。

但是，我认为段落<p>是 block 元素，所以我希望第二段属于一个新行(或者说“ block ”)，如下所示。

那么为什么第二段直接落在第一段的下面，如代码片段所示？

Answer 1

它显示为 block 元素，但父元素没有取子元素的高度(原因是您使用的是 float 元素，当您使用 float 元素时父元素未检测到高度)，请检查这个video这阐明了我对 float 的理解，最简单的解决方法是将 overflow:auto(为简单起见，选择此 css 而不是 clearfix，但一般方法是使用 clearfix)到 p 标签，那么父元素将取子元素的高度，输出符合预期。

引用资料:

1. What is clearfix

2. Expanding parent to height of children

3. Expanding parent to child

   img.align-left {
       float: left;
       margin-right: 10px;
   }
   img.align-right {
       float: right;
       margin-left: 10px;
   }
   img.medium {
   	width: 250px;
   	height: 250px;
   }
   p{
   overflow:auto;
   }

   <p><img src="https://image.ibb.co/dAnvmk/magnolia_medium.jpg" alt="Magnolia" class="align-left medium" />
       <b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p>
   <p><img src="https://image.ibb.co/dAnvmk/magnolia_medium.jpg" alt="Magnolia" class="align-right medium">
       Some magnolias, such as <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open. Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p>