Div Clears Float Even Though No Clear Property is Set

问题

This is way-too-basic question, but the behavior of the div on my website leaves me perplexed.

I've experienced identical issue before, so I am sure I am doing something wrong, consistently, or misunderstanding some fundamental CSS rule.

Question: Why does the red div tag near the bottom right of the site clears its left counterpart? There's no "clear" rule applied to it!

Here's the html:

<div id="home-left">
<?php 
echo "Some php=generated content";
?>
</div> <!-- END HOME-LEFT -->

<div id="home-right-container">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div> <!-- END HOME-RIGHT-CONTAINER -->

And here's the corresponding CSS:

#home-left {
width:280px;
margin:0 0 0 20px;
//clear:both; /* STAY CLEAR OF THE SCROLLER-FEATHER-CONTAINER! */
}

#home-left h3 {

    //font-size: 1.128571429rem;
font-size:12px;
    line-height: 1.2;
    font-weight: bold;
text-transform:uppercase;
margin-bottom:10px;
}

#home-left p {
    margin: 0 0 24px;
    margin: 0 0 1.514285714rem;
font-size:11px;
    line-height: 1.5;
}

#home-right-container {
width:100px;
background:red;
float:right;
}

回答1:

The left div is actually clearing the right counterpart. This is because if the element is not floated, it will basically take on a margin stretching across the entire width of the page.

Two Solutions:

Add float: left to the div on the left side of the red box.
Add display: inline-block to the div on the left side of the lower red box.

回答2:

Because it comes after the element that is to the right in the document flow.

You can either switch the element order which will give you the result that you want. Or float the other element to the left also which can also give the result that you want.

回答3:

float allows an element to float to the side of elements below it, not element above it.

If you float #home-left left, the right div will be to the right

回答4:

Just add float: left on style.css Line 235. Hope this Helps.

来源：https://stackoverflow.com/questions/16047291/div-clears-float-even-though-no-clear-property-is-set

标签

css

css-float

clear