Basic CSS floating elements behavior

Question

I have troubles to understand some very basic css floating rules.

Let's say I have a HTML structure like this:

* {
    padding: 0;
    margin: 0;
}
div {
    width: 200px;
    height: 100px;
}
.base {
    float: left;
    border: 10px solid green;
}
.regular {
    height: 50px;
    border: 10px solid blue;
}
p {
    border: 10px solid red;
}

<div class="base"></div>
<div class="regular"></div>
<p>Some text</p>

Now I don't understand two things:

1. Why are those two floating elements (div.regular and p) aligned to the left edge of the floated div.base element? I would expect they will be aligned to the right edge so they will be next to the base div element.
2. Why is the div.base element above all other elements? I would expect it at the bottom since it is before them in the HTML flow.

I would appreciate if you put some light on this for me or give me some resources to understand it.

Answer 1

If you want to use float you should have a container, after that you should play with position of elements in css file:

.container{
	width: 100%px;
	height: 100%px;
	border-style: dotted;
}

.base {
    border: 10px solid green;
}
.regular {
    height: 50px;
    border: 10px solid blue;
}
p {
    border: 10px solid red;
}

<div class="container">
        <div class="base">div1</div>
        <div class="regular">div2</div>
        <p>Some text</p>
   </div>

Answer 2

Both of your questions can be answered by referring to section 9 of the CSS2.1 spec.

1. Why are those two floating elements (div.regular and p) aligned to the left edge of the floated div.base element? I would expect they will be aligned to the right edge so they will be next to the base div element.

   From section 9.5:

   Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

   The line boxes refer to the boxes that actually contain the text. In your example, the p element contains one or more line boxes with the words "Some text". Those line boxes are made to reflow around the float. The block box that is generated by the p itself (which in turn contains those line boxes) is laid out as described in the first sentence, simply because block boxes obey different layout rules from line boxes.

2. Why is the div.base element above all other elements? I would expect it at the bottom since it is before them in the HTML flow.

   From section 9.9, emphasis mine:

   Within each stacking context, the following layers are painted in back-to-front order:

   1. the background and borders of the element forming the stacking context.
   2. the child stacking contexts with negative stack levels (most negative first).
   3. the in-flow, non-inline-level, non-positioned descendants.
   4. the non-positioned floats.
   5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
   6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
   7. the child stacking contexts with positive stack levels (least positive first).

   Item #3 refers to div.regular and p, since they are in the normal flow, they are block-level, and they are non-positioned. #4 refers to div.base, which is floating.

   Elements are painted in source order when

   • you have multiple elements belonging to the same category, for example when you have two floating elements, or
   • otherwise not mentioned in this list.