Why <div class="clear"></div> didn't used?

Question

Hi, sometimes learning something makes you more confused, I am in that position right now, thanks in advance.

I asked a question in this address: Why <div class="clear"></div> used?

After getting the answer and accepting (I also read the links given in comments section), now I've 2nd and 3rd questions.

According to the input codes given in related question,

1. Why grid demo code below didn't use <div class="clear"></div>? Again there exist 2 sets of two floating div elements so isn't it suitable to use <div class="clear"></div> just after the last floating div elements?

I explicitly mention that I would expect <div class="clear"></div> code in 2 places: Just after <div class="col col_7"> and just after <div class="col col_4">

    <div class="row">
        <div class="col col_1">col_1</div>
        <div class="col col_7">col_7
            <div class="row">
                <div class="col col_3">col_3</div>
                <div class="col col_4">col_4</div>
            </div><!-- row -->
        </div>
    </div><!-- row -->
</div><!-- col_8 -->

2. The owner of accepted answer wrote that: "Without this the content following your nav element may appear alongside your nav element rather than below it." Since he used MAY grammar & I deleted <div class="clear"></div> and saw that nothing has changed in output for IE9 and Chrome 25.0.1364.172; what maked him to write MAY? Old browsers (especially old IE versions)?

Answer 1

This depends on your CSS that is associated with the different classes/ids/elements in your HTML.

<div class="clear"></div> ALWAYS has some css associated with it, that is:

.clear { clear: both; }

The above CSS is what makes it prevent that floating issue. That said... Using a "clear div" as you have shown above is one of many ways to do this.

In your particular case, given this HTML:

<div class="row">
        <div class="col col_1">col_1</div>
        <div class="col col_7">col_7
            <div class="row">
                <div class="col col_3">col_3</div>
                <div class="col col_4">col_4</div>
            </div><!-- row -->
        </div>
    </div><!-- row -->
</div><!-- col_8 -->

It is very likely that the class of "row" has the clear: both; property in CSS. That would explain why when you remove the clear div, it stayed the same. Essentially you didn't need the clear div, because the row class already has the CSS attached to it to prevent that issue from happening.

The selector probably looks like this: .row { clear: both; } The .row class probably has other CSS associated with it as well, another very likely property is overflow: hidden; That property can also effect how your divs and surrounding divs interact/behave next to each other.

To summarize: It is NOT the HTML <div class="clear"></div> that prevents this floating issue from happening. It IS the CSS property and value clear: both; which can be applied to any HTML element that prevents the issue from occurring.

Some resources: CSS Wiki on Overflow property CSS Wiki on Clear property

Hopefully this clears that up for you? (pardon the pun haha)