0

I am using float to put a img and p in the same line, this work like this:

<div class="clearfix">
  <h1>img(float: left) ; (p float: none)</h1>
  <img src="http://via.placeholder.com/640x100" style="float: left"/>
  <p>
    Text1
  </p>
</div>

That work correctly (img and p in the same line). BUT if I set the width property in the p like this:

<div class="clearfix">
  <h1>img (float: left) ; p(with width float: none)</h1>
  <img src="http://via.placeholder.com/640x100" style="float: left"/>
  <p style="width: 300px;">
    Text1
  </p>
</div>

That does not work like I expect (img in one line and p in another) (I do not understand why) And if I set explicity float left in the p element like this:

<div class="clearfix">
      <h1>img (float: left) ; p(with width float: left)</h1>
      <img src="http://via.placeholder.com/640x100" style="float: left"/>
      <p style="width: 300px;float:left">
        Text1
      </p>
</div>

that works properly too.

So my questions are:

why set width destroy the float flow?

why set width and set also float in the p does work and what is difference between set float in all element and set float in the first element only?

I know I can use flexbox and grid but i am talking about float.

EDIT: image with borders in p Preview of 3 examples:

enter image description here

Complete example here:

jsfiddle example

Lucke
  • 316
  • 6
  • 18
  • add borders around the p element to understand what is happening – Temani Afif Dec 13 '20 at 11:57
  • I added border to p and does not understand what happens. could you explain it ? – Lucke Dec 13 '20 at 12:06
  • @TemaniAfif I think this was not answered in another place... – Lucke Dec 13 '20 at 12:09
  • read the duplicate**s** I added to understand how float works and you will understand what is happening with your code (PS: decrease the opacity of the image to see how the borders of the text behave) – Temani Afif Dec 13 '20 at 12:11
  • @TemaniAfif I see several questions some with position: relative etc.. what is the answer that respond to my cuestion ? – Lucke Dec 13 '20 at 12:19
  • please take the time to read the duplicates (at least the first one). Your answer is *you need to understand a lot of concept around float* and I wrote detailed answer with examples around this in the question I linked. You cannot do this in few seconds or even few minutes. You need time to understand and play with the examples there. Your question doesn't require a Yes or No reply, it requires and in depth explanation and some time to understand it. – Temani Afif Dec 13 '20 at 12:26

0 Answers0