floating elements are outside of containing blocks?

It remains a part of the flow because text still wrap around float thus they are still considered a part of the flow unlike position:absolute elements that will no more affect the flow.

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).^ref

To answer your question, let’s add the properties step by step.

Intitially we have this:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  /*float: left;*/ 
  background: pink;
}

.left_second {
  position:relative;
  background: blue;
}

.right {
  /*float: right;*/
  background: cyan;
}

<section>
  <div class="left">1</div>
  <div class="left_second">2</div>
  <div class="right">3</div>
</section>

No float element, each div taking a row and all of them inside the border of the section. Let’s float the first one and make the blue background a bit transparent and remove the last div.

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  background: rgba(0,0,255,0.4);
}

.right {
  /*float: right;*/
  background: cyan;
}

<section>
  <div class="left">1</div>
  <div class="left_second">2</div>
  <!--<div class="right">3</div>-->
</section>

As you can see the blue div is completely overlapping the float element and the text of the blue div is outside. Here you facing an oveflow issue. Let’s increase the width of the blue box to better see:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  width:300px;
  background: rgba(0,0,255,0.4);
}

.right {
  /*float: right;*/
  background: cyan;
}

<section>
  <div class="left">1</div>
  <div class="left_second">2</div>
  <!--<div class="right">3</div>-->
</section>

As you can see, the text (2) start after the float element and don’t overlap it because text wrap around float element unlike block element. In other words, the blue div will start on the top of the float element but not its content and if the size is reduced the text will get pushed to the next line and will overflow:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  width:300px;
  background: rgba(0,0,255,0.4);
  transition:1s;
}
.left_second:hover {
  width:200px;
}

.right {
  /*float: right;*/
  background: cyan;
}

<section>
  <div class="left">1</div>
  <div class="left_second">2 (hover me)</div>
  <!--<div class="right">3</div>-->
</section>

You may also notice that only the blue div is surrounded by the blue border of the section because its the only non floated element and since it overlap the pink this one will necessarly be there too. If you remove the blue div you see that the pink one is outside:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  width:300px;
  background: rgba(0,0,255,0.4);
  transition:1s;
}
.left_second:hover {
  width:200px;
}

.right {
  /*float: right;*/
  background: cyan;
}

<section>
  <div class="left">1</div>
  <!--<div class="left_second">2</div> -->
  <!--<div class="right">3</div>-->
</section>

Now if we re-add the third div it will start at the bottom of the blue div and inside the section:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  background: rgba(0,0,255,0.4);
}

.right {
  /*float: right;*/
  background: cyan;
}

<section>
  <div class="left">1</div>
  <div class="left_second">2</div> 
  <div class="right">3</div>
</section>

And if you float it to the right, it will be place on the right and outside the section:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  background: rgba(0,0,255,0.4);
}

.right {
  float: right;
  background: cyan;
}

<section>
  <div class="left">1</div>
  <div class="left_second">2</div> 
  <div class="right">3</div>
</section>

That’s why we need to clear float to avoid the overlap effect and the outside effect:

section {
  border: 1px solid blue;
  overflow:hidden; /*make the float inside*/
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  clear:left; /*clear left float*/
  background: rgba(0,0,255,0.4);
}

.right {
  float: right;
  background: cyan;
}

<section>
  <div class="left">1</div>
  <div class="left_second">2</div> 
  <div class="right">3</div>
</section>

More Related Contents:

Leave a Comment Cancel reply