Textual content of a div does not have around a float box

Question

I have three block elements, three div but the first is a float element thereby the float element will behave as if it didn't exist, thus the second div overlap the float element but the textual content of the box (the second div) retams some memory of the floated element and should be shortened to make room for the floated element instead this does not happen. In fact the text wraps and the second box is superimposed to first float box. I don't understand the reason for this behavior

.box {
  border: thick solid red;
  width: 400px;
  height: 400px;
  background-color: yellow;
}

.box:first-child {
  float: left;
}

<!-- Essendoci sovrapposizione tra il primo e il secondo div ed anche opacita
      il primo div(sovrapposto al secondo) appare di un colore diverso del terzo. 
     -->
<div class="box">
  First element
</div>

<div class="box">
  Second element
</div>

<div class="box">
  Third element
</div>

I am adding many duplicates and all of them explain the tricks behind float. If you closely follow them you will understand what is happening — Temani Afif, Sep 23 '19 at 15:02
@Temani Afif. Thanks, I have read the duplicates and now I understood. — Nick, Sep 23 '19 at 16:56

score 0 · Answer 1 · answered Sep 23 '19 at 15:03

0

You can use clearfix css hack to prevent clear floating:

https://jsfiddle.net/0ce26f7d/14/

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

answered Sep 23 '19 at 15:03

demkovych

7,827
3
19
25

Textual content of a div does not have around a float box

1 Answers1