3

I have a container with background color green. Inside that green <div>, I have a <div> which is black and styled as a box (50px x 50px) - this <div> is floated to the left.

Now if I add a <p> to my markup after the grey <div>, I'd expect it to float around the grey <div>. And it does. However, when I substitue

with another <div> which is styled as box (set height and width), it doesn't float around anymore, but disappears behind the floating div.

Even if I have first paragraphs which are floating around correctly and THEN I add the div (box), the paragraphs stop floating around and appear on another line.

HTML:

<div id="greencontainer">
    <div id="blackbox"></div> <!--this one is float:left;-->
    <p>A paragraph that floats around the previous div</p>

    <div id="anotherbox"></div> <!-- if I add another div with set width and height, it disappears behind the floated one, and even prevents the paragraph from floating around.-->
</div>

CSS:

#blackbox {
    width:50px;
    height:50px;
    background-color:black;
    float:left;
}

#p {
    margin:0px;
    padding:0px;
}

#anotherbox {
    width:50px;
    height:50px;
    background-color:grey;
}
4

3 回答 3

3

Actually, part of the <p> itself, which is a block box, is also hiding behind your first <div>. That's because it's not being floated, so it's being laid out in normal flow as if the first <div> was not there, because floating a box takes it out of normal flow.

Your <p> contains inline content (its text), however that inline content is able to flow around your first <div>, because inline content is made that way. It's why you're able to align an image to the left or right and text is able to flow around it without the image being in the way.

Your second <div>, like your <p>, isn't floated, so again it's being laid out in normal flow as if your first <div> wasn't there. Since both of them have the same dimensions, it looks as if one is completely hidden behind the other.

In your code you have the second <div> coming after the <p>, so it shouldn't affect the text. However if you meant to add it before the <p>:

<div id="greencontainer">
    <div id="blackbox"></div>
    <div id="anotherbox"></div>
    <p>A paragraph that floats around the previous div</p>
</div>

Then, upon reading my explanation above, the reason the text stops flowing around the first <div> becomes obvious: because your second <div> is in the way, hidden behind the first one. It's that second element that's pushing your <p> down.

于 2012-11-24T02:48:17.163 回答
2

A non-floated div will not natively wrap around a floated division afaik. What you should do is add margin-left: 50px on the anotherbox div to let it flow correctly if it is beside the floated container. I'm not sure if this is the best solution, but it normally works well if you know that the div will always be beside the floated div. If it's not beside it, then it will flow correctly without it automatically.

Check out this fiddle.

http://jsfiddle.net/bvSby/

于 2012-11-23T23:01:50.753 回答
0

I have recently come across this issue too and have found purely by chance that adding overflow: auto (or hidden) to the div, will cause it to float around the floated div (like you'd expect).

Change the css of #anotherbox to look like this...

#anotherbox {
    width:50px;
    height:50px;
    background-color:grey;
    overflow: auto;
}

Here's a link to test this: https://jsfiddle.net/kh3pdbtx/

As to why this works - I honestly don't know. If someone could shed some light on the subject and explain the reason behind this I'd really appreciate it.

It seems to be something to do with Block formatting context.

于 2016-03-04T14:41:40.643 回答