4

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.

HTML and CSS by Jon Duckett, produced under the Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

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.

enter image description here

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

Koby Douek
  • 16,156
  • 19
  • 74
  • 103
Dave Smith
  • 185
  • 1
  • 2
  • 9

2 Answers2

3

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>
Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • yes now that makes sense, because that is why you use the clearfix method, but why does the text in the second `

    ` still detect the `` in the first `

    ` and hence wrap around it?

     – Dave Smith Aug 27 '17 at 12:10
  • @DaveSmith Whenever you use the float, the element will be a block level element, but the element is still a part of the page flow, hence the text will wrap around the element. Note `position:absolute` can also be used to do positioning, but does not make the element a part of the page flow, and the text will ignore the element. Read more on this [Reference1](https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/) and [Reference2](https://css-tricks.com/almanac/properties/f/float/) – Naren Murali Aug 27 '17 at 12:21
  • Perfect - just to add, when you say "it is displaying as a block element", are you referring to the image or the paragraph? Just want to check! – Dave Smith Aug 27 '17 at 12:35
  • @DaveSmith the image, since it has float property set – Naren Murali Aug 27 '17 at 12:37
1

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>
Sangrai
  • 687
  • 1
  • 6
  • 19