How the block element works inside a floated div?

Question

This is a continuation of the following question:

CSS Float - The content stays in the default stack position

When I am adding a block element(p element) inside box1, (which comes after the floated box0), the p element wraps as expected. However, it is not starting from the edge of the container. Please see the image.

Also, the behaviour is different when I add display: inline-block, or float:left, or overflow:hidden to the paragraph element. Can someone please explain these scenarios?

enter image description here

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;
}

You have to set margin and padding manually to zero in your CSS, because by default all browsers add some padding to the elements (in most cases it is around 4px) — Bud Damyanov, May 13 '14 at 06:45
just an unlucky line-height: http://jsfiddle.net/xGm5E/4/ or to show with background-colors, the element is there: http://jsfiddle.net/xGm5E/5/ — caramba, May 13 '14 at 06:46
p element has a default padding. I agree to that. But, that doesn't explain, why it is not starting from the left end after the div. Please see the highlighted portion in the screenshot. — Jinto, May 13 '14 at 06:47
@jintoppy but it is starting at the left, see where your black border is! — caramba, May 13 '14 at 06:48
@caramba: yes. but, why the content on the first line only behaves like that? — Jinto, May 13 '14 at 06:50
@jintoppy because of the line-height, there is no space for those letters to go to the left with the given line-height. you can change line-height, add paddings, change the overflow, many ways go to rome — caramba, May 13 '14 at 06:54

score 3 · Accepted Answer · edited May 23 '17 at 10:33

There isn't enough room for the text in the p to start a new line there, so it starts only at the right edge of the float, giving the appearance of a gap underneath the float. If you give the p a slightly bigger top margin, there will be enough room for the second line of text to start directly underneath the float:

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

You can also increase the line-height as mentioned by others; this will cause the first line to be tall enough for the second line to have room to start underneath the float.

The reason why the boundaries of the p element don't shift completely out of the float is because the p element behaves exactly like .box1, since neither of them are floating. The text wraps in the same way I've described in my previous answer.

The reason why it behaves differently when you add display: inline-block, float: left or overflow: hidden is given in the comments on my previous answer:

overflow: hidden causes the box to generate a block-formatting context, which makes it immune to surrounding floats. That causes the entire box to shift outside of the float and sit right next to it instead.

(Technically, display: inline-block also causes the p element to act like an inline element itself, in other words, it is rendered inline just like the first sentence in .box1, but this has the same effect.)

When neither .box1 nor p are generating block formatting contexts, they are both participating in the same context, which is actually that of the root element. This is what causes them to interact with the float the way you are observing.

Block formatting contexts are a very complicated and broad topic that I would rather not get into myself, but the answer to this question has a nice visual explanation on how they work and how elements interact with one another around them in various scenarios.

score 2 · Answer 2 · answered May 13 '14 at 06:54

2

I would assume this is to do with the line height.

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

This works :)

answered May 13 '14 at 06:54

websiteninja

36
1
4

score 1 · Answer 3 · answered May 13 '14 at 06:52

1

add overflow: hidden; in box1 class.Try this once.

answered May 13 '14 at 06:52

saikiran.vsk

1,788
1
10
11

While this _might_ solve the problem (didn't test it yet and you didn't provide a fiddle), it doesn't answer the question, since OP asks for an _explanation_. – Zeta May 13 '14 at 06:53

How the block element works inside a floated div?

3 Answers3

Linked