如何阻止标题和下方文本围绕左上方浮动的 img 元素流动

Question

Suppose the order of the layout like so:

H3
<LEFT-FLOATED IMG> <text>
<H3>
<LEFT-FLOATED IMG> <text>

Now, for lower screen sizes, the above layout produces no problems:

However, once the screen is resized to a higher dimension, the following problem occurs:

This is the source code, and note that I am using Bootstrap-4 to achieve float-left, etc:

    <h3>Pigmentary variegation</h3>
        <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example">
        <p>Text for pigmentary variegation</p>

   <h3>Pathological variegation</h3>
       <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus">
       <p>Text for pathological variegation</p>

How could I prevent text beyond the lower H3 element from wrapping around the above left-floated image?

Answer 1

将clear:both添加到您的 h3

h3 {clear:both;}

Answer 2

Wrap each section in a div which has display:block; by default:

<div>    
  <h3>Pigmentary variegation</h3>
  <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example">
  <p>Text for pigmentary variegation</p>
</div>
<div>
  <h3>Pathological variegation</h3>
  <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus">
  <p>Text for pathological variegation</p>
</div>

Answer 3

Alvaro answer is good, but in some case it is more useful to wrap your code with a div with this class:

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
    border-collapse: collapse;
}

Answer 4

You have 2 option in less.

---

1: you can use "clearfix" property in your html codes (with some css codes) like this:

css:

.clearfix {
    clear: both;
}

html:

<h3>Pigmentary variegation</h3>
<img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example" />
<p>Text for pigmentary variegation</p>
<div class="clearfix"></div> <!--This is your clear code for clear float's gap. -->
<h3>Pathological variegation</h3>
<img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus" />
<p>Text for pathological variegation</p>

2: use "div" for your sections. (every section should have 1 parent div). div can create a block with your section that have display block by default. so your code is like this:

<div>
<h3>Pigmentary variegation</h3>
    <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example" />
    <p>Text for pigmentary variegation</p>
</div>
<div>
    <h3>Pathological variegation</h3>
    <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus" />
    <p>Text for pathological variegation</p>
</div>