Basic CSS CSS Behavior

Question

I have problems to understand some very simple floating css rules.

Say I have an 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>

Run codeHide result

Now I do not understand two things:

• Why do these two floating elements (div.regular and p) coincide with the left edge of the floating element div.base? I expect them to be right-aligned so that they are next to the base div element.
• Why is the div.base element above all other elements? I would expect it to be down below, as it is up to them in the HTML stream.

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

Answer 1

, 9 CSS2.1.

• (div.regular p) div.base? , , div.

  9.5:

  float , , , , , . , , , , .

  , . p "Some text". . -, p (, , ), , , , .

• div.base ? , , HTML.

  9.9, :

  :

  • , .
  • ( ).
  • , -, - .
  • .
  • inline, inline-level, .
  • 0 0.
  • ( ).

  № 3 div.regular p, , , . # 4 div.base, .

  ,

  • , , ,
  • .

Answer 2

float, , css:

.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>

Hide result