CODEWITHSUNDEEP
htmlcsslayoutoverflow
nalzok
nalzok

Reputation: 16117

Difference between ways of participating into BFC/IFC

As far as I know, both overflow: hidden and display: inline-block establish a new BFC in .mid-column. However, the former would make .mid-column a block box, while the latter would make it an atomic inline-level boxes.

Using overflow: hidden

.left-column {
  float: left;
  background-color: grey;
}
.right-column {
  float: right;
  background-color: grey;
}
.mid-column {
  overflow: hidden;
}
<div class="wrapper">
  <div class="left-column">
    <h3>Left Column</h3>
  </div>
  <div class="right-column">
    <h3>Right Column</h3>
  </div>
  <div class="mid-column">
    <h3>Mid Column</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="left-column">
      <h3>Inner Left Column</h3>
    </div>
    <div class="right-column">
      <h3>Inner Right Column</h3>
    </div>
  </div>
</div>

Using display: inline-block

.left-column {
  float: left;
  background-color: grey;
}
.right-column {
  float: right;
  background-color: grey;
}
.mid-column {
  display: inline-block;
}
<div class="wrapper">
  <div class="left-column">
    <h3>Left Column</h3>
  </div>
  <div class="right-column">
    <h3>Right Column</h3>
  </div>
  <div class="mid-column">
    <h3>Mid Column</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="left-column">
      <h3>Inner Left Column</h3>
    </div>
    <div class="right-column">
      <h3>Inner Right Column</h3>
    </div>
  </div>
</div>

I can only explain the layout in the first demo. According to the document(bold mine):

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

The overflow: hidden rule establishes a new BFC, and thus, the border box of .mid-column must not overlap the margin box of .left-column and right-column.

As for the second demo, the only thing I know is that there is an anonymous block box around .mid-column, which establishes an IFC for it. Unfortunately, I cannot explain it any further.

My question is: How does participating into an IFC, rather than a BFC, affect the layout? And it would be nice if somebody can provide an in-detail explanation on the second demo, or at least provide a link for the relevant document so I can figure it out.

Upvotes: 2

Views: 579

Answers (1)

BoltClock
BoltClock

Reputation: 723729

How does participating into an IFC, rather than a BFC, affect the layout?

Inline-level boxes flow inline on line boxes, like text. That's all there is to it. The formatting context in which a box participates has no effect on any formatting context that the box may establish for its contents (if it establishes one).

.mid-column itself, when displayed as an inline-block, participates in an IFC that's established by an anonymous block box (created for this purpose), but as far as the descendants of .mid-column are concerned, they are participating in a BFC that's established by .mid-column. Whatever happens outside of this BFC is of no concern to them, and elements outside the BFC can never interfere with the block layout that's taking place in this BFC.

The anonymous block box that's generated around .mid-column in the second demo participates in the root BFC. .wrapper does not establish a BFC in either demo. Since the floats eat into the available width of .wrapper (and in turn the anonymous block box), there is not enough room for .mid-column to vertically align with the floats, and that is why .mid-column gets pushed down.

The relevant link has already been provided in the comments; section 9.4 of CSS2 tells you everything you need to know.

Upvotes: 2

Related Questions