HTML/CSS aligning images using `<p>` and `float`

Question

I am learning about aligning images using float in CSS. An example I learnt in the book regarding this property is shown below.

 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> 

This is the result that I expected, as shown in the book tutorial.

However, I thought that paragraphs <p> were block elements, so I expected the second paragraph to fall under a new line (or "block" so to speak") as shown below.

So why is is that the second paragraph falls directly under the first paragraph as shown in the code snippet?

Answer 1

It is displaying as a block element, but the parent is not taking the height of the child elements (the reason is that you are using floating elements, when you use floating elements the height is not detected by parent), please check this video which clarified my understanding of float, the simplest fix is to set overflow:auto (This css is chosen over clearfix for simplicity, but the general method is to use clearfix) to the p tag, then the parent will take the height of the child elements and the output is as expected.

References:

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> 

Answer 2

There are two method as explained by Mr. Murali above and this one as below.

Add css as p{float:left; width:100%;} 

Try this:

 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; float:left; width:100%; } 

 <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>