Home/ Questions/Q 9089283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:07:07+00:00

I’m trying to understand the behavior of float and clear . For that reason

  • 0

I’m trying to understand the behavior of float and clear. For that reason I’ve created a tiny example (avaiable on jsfiddle) for experimenting:

HTML:

<div class="left">A</div>
<div class="custom">B</div>
<div class="left">C</div>
<div class="left">D</div>​

CSS:

div {
    background-color: blue;
    color: red;
    width: 100px;
    height: 100px;
    margin: 3px;
}

.left {
    float: left;
}

.custom {
    float: none;
}​

First of all I do not understand why the background-color: blue; directive seems lost for B.

original

And secondly it’s not clear to me, why removing margin: 3px; statement results in this:

margin removed

Thank you in advance for your help or links.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The directive isn’t being lost for B – it’s just that the floated elements surrounding it are pushing the text outside of the div. Remove the background colour from the floated elements, and you can see things a bit clearer:

    http://jsfiddle.net/faq9h/3/

    When you remove the margin (as in your second image), what you’re actually seeing is the background of C showing through underneath the B text.

    A quick way of fixing this is to add display: inline-block to the non-floated element:

    http://jsfiddle.net/faq9h/4/

    Then your boxes will appear as A C D B.

    As for understanding what’s going on: this is an excellent article.

    • 0