How does a block element work inside a floating div?

Question

This is a continuation of the following question:

CSS Float - content remains at the default stack position

When I add a block (p element) element inside box1 (which appears after float box0), the p-element wraps up as expected. However, it does not start from the edge of the container. See Image.

Also, the behavior is different from when I add a display: inline block or float: left or overflow: hidden paragraph element. Can someone explain these scenarios?

http://jsfiddle.net/jintoppy/xGm5E/3/

<div class="box0">Box 0</div>
<div class="box1">Box1 should wrap with text elements.
    <p>But, what about block elements? Why it is behaving like this</p>
</div>

.box0 {
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
    opacity: .5;
}
.box1 {
    width: 200px;
    height: 100px;
    background-color: red;
}
p {
    border: 1px solid #000;
}

Answer 1

p, , , . p , ,

p {
    margin-top: 1.2em;
    border: 1px solid #000;
}

, ; , , .

, p float, , p , .box1, . , .

---

, -, display: inline-block, float: left overflow: hidden, :

overflow: hidden , . .

(, display: inline-block , p , , , .box1, .)

.box1, p , , . , , .

- , , , .

Answer 2

, .

p {
    border: 1px solid #000;
    line-height:1.5;
  }

:)

Answer 3

add overflow: hidden;to box1 class. Try this one time.