In a two-column boundary field with an undefined height and a clear div, what causes a difference in height?

Question

I created a JSFiddle to illustrate this example, and will contain HTML / CSS at the end of this post. My understanding of the border-box styling option is that it causes borders and padding to be included in the given widths and heights. In the example, I use min-height, and therefore the field on the right grows in height with an additional addition, but not in width.

Where is the extra height coming from the second example? In the first case, two floats are used of equal width, and the heights remain unchanged. In the second, on the right it grows in height with the addition. This only happens with clear divs placed inside nested blocks. Removing clear divs makes the second example look the same, but I don't understand why a clear div causes extra height.

Update

For some reason, the installation of overflow on the problems hidden in the boxes was solved without any strange actions. I do not know why.

HTML:

 <div id="correct"> <div class="box"><div style="clear: both;"></div></div> <div class="box"><div style="clear: both;"></div></div> <div style="clear: both;"></div> </div> <div id="incorrect"> <div class="box"><div style="clear: both;"></div></div> <div class="box"><div style="clear: both;"></div></div> <div style="clear: both;"></div> </div> 

Related CSS:

 * { box-sizing: border-box; } #correct, #incorrect { width: 800px; border: 1px solid red; padding: 5px; margin-bottom: 10px; } .box { min-height: 100px; width: 50%; border: 1px solid green; padding: 10px; } #correct .box { float: left; } #incorrect .box:nth-of-type(1) { float: left; } #incorrect .box:nth-of-type(2) { margin-left: 50%; } 

Answer 1

As already mentioned, this has nothing to do with box-sizing: border-box . Your understanding is correct in that the calculations according to the size of the scale work only on boxes with given heights, which is not the case here.

This is because clearfix in the second field (with extra height) is trying to clear the float that is next to it. This will cause clearfix to be pressed all the way so that it is flush with the bottom edge of the field. Section 9.5.2 of the specification describes in detail the cleaning behavior, which takes into account a number of cases, but this boils down to moving the clearfix down, since it is necessary to “place the boundary edge of the [cleaning element] even with the lower outer edge of the lowest float to be cleaned "

The extra height is just the bottom padding of the non-floating box - clearfix cannot bleed into the fill area, so the field needs to grow its content area to accommodate the new clearfix position.

If you added some content to clearfixes, you can see exactly where each is executed :

 div[style]::before { content: 'clearfix'; } 

If you specify a height for the fields so clearfix overflows the field as a result of trying to clear the floating field (and this happens regardless of whether it is box-sizing content-box or border-box , although this affects the calculation of the height itself):

 .box { height: 100px; width: 50%; border: 1px solid green; padding: 10px; } 

The reason why removing clearfix solves the problem is because without any gap in the second field there is nothing to move, and therefore its height does not increase.

The reason that floating both fields or setting overflow: hidden solves the problem is because each of these things causes windows to set their own block formatting contexts . One of the defining features of BFC is that those floating outside it can never interact with any elements within it. This includes all and all clearfix fields in the BFC.

Without setting the overflow property or floating second field,

• floating box ( #incorrect .box:nth-of-type(1) ),
• non-floating block ( #incorrect .box:nth-of-type(2) )
• and its clearfix ( #incorrect .box:nth-of-type(2) div[style] )

all participate in the same block formatting context. For this reason, clearfix in a non-floating box is trying to clear the floating block. (Note once again that clearfix in a floating block is involved in the BFC, which is set in the floating point field, and not in which the three above-mentioned elements, which set the initial containing block , are involved.)

Answer 2

It looks like the last div trying to clear pass at the bottom of the left div . If you add margin-top: 11px to the div , it no longer has extra height. I do not know why it does this for an element with a left margin, but not with a floating element. Perhaps someone who is familiar with CSS specifications can answer this question?

Answer 3

The problem is not related to the box-sizing property, I think there are different ways of applying the clear property to / in the float vs non-float element.

In ORIGINAL DEMO, only the last field has no float property, this is where the problem comes from.

See UPDATED DEMO , I removed all box-sizing and added some lines to demonstrate everything, including clear elements. Try to enable / disable float: right; and margin-left: 50%; in the last box in CSS and see the differences.

I have not yet found a way to answer this question. But these articles may help.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

http://alistapart.com/article/css-floats-101

Answer 4

A quick solution to your violin is to add a maximum height of 100 pixels to the .box class. https://jsfiddle.net/tvd72a0p/10/

 .box { min-height: 100px; max-height: 100px; width: 50%; border: 1px solid green; padding: 10px; }