CODEWITHSUNDEEP
htmlcss
happy_story
happy_story

Reputation: 1155

Why do floated elements not overlap a block-element if they are defined after them in the HTML structure?

.left-box {
  background-color: green;
  float: left;
  padding:10px;
}


.center {
  background-color: lightcoral;
}
    <div class="left-box">left box</div>
 
    <div class="center">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates!
    </div>

In this example, the floated box is defined BEFORE the block-box in the HTML structure, and as expected, it overlaps with the block-box.

However, if the floated-box is defined AFTER the block-box...

.left-box {
  background-color: green;
  float: left;
  padding:10px;
}


.center {
  background-color: lightcoral;
}
    <div class="center">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates!
    </div>

    <div class="left-box">left box</div>

..now the floated-box does not overlap with the block-box, instead, it touches its bottom edge. Why? Shouldn't the floated-box be taken out of the normal flow and moved to the left until it touches the edge of the container or another floated-box?

The specs say:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box. [...]

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

But that's not what happens, is it? The floated-box does not touch the outer edge of another float or the container, it touches the outer edge of a block-box. And, the non-positioned block-box is created before the float-box, and yet, for the float-box, the block-box clearly exists. Why? Am i missing something?

At first i thought it's because the float-box touches the line-box inside the block-box, but if you increase the height or margin of the block-box, the float-box still touches the bottom edge.

Upvotes: 3

Views: 81

Answers (1)

Rounin
Rounin

Reputation: 29463

Thinking about the vertical progress of the Document Flow will answer your question.

In your second example, although unstated in the CSS, .center has the default positioning and the default display for a <div>:

.center {
  position: static;              // by default
  display: block;                // by default
  background-color: lightcoral;
}

That means it completes displaying itself within the vertical flow, as a statically positioned, block-level entity.

Then, after this element completes displaying itself (within the flow), the next element in the vertical flow is .left-box.

.left-box begins displaying itself at the first available point within the vertical document-flow.

But the top of .left-box can't be any higher than the bottom of .center because the latter has already completed positioning and displaying itself within the vertical document flow.

In your first example, .center also begins at the first available point within the vertical document-flow... but, by contrast, this first available point is no lower than where .left-box begins.

Why not? Because, as a floated element, .left-box is absent from the vertical document-flow.

This means that .center may essentially ignore .left-box and display itself within the vertical document-flow precisely where it would have displayed anyway if .left-box didn't exist.

Upvotes: 1

Related Questions