Floating Elements Within a Div, Floats Outside of Div. Why

Floating elements within a div, floats outside of div. Why?

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

How to contain floats inside a DIV

This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box

.posts__post--meta{
    padding: 0 25px;
    display: inline-block;
    text-docoration: none;
    width: 100%;
    box-sizing: border-box;
}

For more info about box-sizing

Making a div appear as if it's floating outside of it's container

You are setting the parent wrap to have position:relative, and the wayward child to have position:absolute.

This works, but you are right that there is an easier way. Just set the child to have position:relative, then make sure that the parent doesn't have overflow:hidden.

Instead of using relative or absolute, you could just use margins:

body {
    background: #444;
}
section {
    width: 600px;
    margin: 6em auto 0 auto;
}
#container {
    margin-top:50px; /*30px would make it touch the <p> above but not overlap, because the image is moved upwards by 30px. 50px gives you a 20px margin.*/
}
#container #image {
    height: 128px;
    width: 128px;
    background: url(http://www.skrenta.com/images/stackoverflow.jpg) no-repeat;
    background-size: contain;
    float:left;
    margin-left:-30px;
    margin-top:-30px;
}
#container #content {
    margin-top:0px;
    padding: 6em 1em 1em 1em;
    border: 2px solid black;
    background: #ccc;
}

<html>
    <body>
        <section>
            <p>Stuff outside of container.</p>
            <div id="container">
                <div id="image"></div>
                <div id="content">
                    <h1>Test One</h1>
                    <p>This is a text box. Insert some text here.</p>
                    <p>More stuff here.</p>
                </div>
            </div>
            <p>Stuff outside of container.</p>
        </section>
    </body>
</html>

Why doesn't my div float around another floated div while other elements do?

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.

floating elements inside a div

Floating element are not considered when calculating the height of parent elements, if the parent's overflow is set to visible according to the CSS2 specification.

There are however CSS hacks to get around this: https://stackoverflow.com/a/11597829/384617

div not floating along the preceding div with float property set to left

A <div> is a block level element which is 100% wide and has a line break before & after when it's within the normal content flow.

Technically, when you float a <div>, you're taking the element out of the normal flow so it no longer has a line-break before & after and also the other page content flows around it.

So why does the second div only position next to the first one when
its width is set or its own float property is set to float left?

Floated <div>'s will always appear side-by-side only if there's enough room to contain them side-by-side. Otherwise, the next floated <div> will wrap to a new line. This is because floated <div>'s are outside the content flow and defined to behave this way in the spec.

However, you've made some incorrect assumptions in your question about what happens when you set the width of the second (non-floated) <div>.

The second <div>, itself, is always underneath (meaning behind) the floated <div>. Whereas, the "content" of the second <div> always flows around the floated <div>. (see three examples below)

So whether or not you set the width of the second div, its content will still flow around the left floated div as you can see illustrated here in three examples. (For illustration purposes, the first <div> is red with 50% opacity and the second is blue with a thick green border.)

Fiddle with second div wider than first
Fiddle with no set width (100%) on second div
Fiddle with second div narrower than first

As you can see from all three examples above, despite the existence of the floated first <div>...

the second <div> always starts on the left edge of the screen despite the width of the second <div>.
the second <div> always starts on the top edge of the screen because there's no other page flow content above the second <div>.
the actual content of the second <div> flows around (to the right of) the floated first <div> only where there is enough room inside its container to allow it to flow around the floated <div>. Otherwise, it appears as if it's starting a new line where really only its content is continuing to flow around the bottom of the floated <div>.

W3C Spec: 9 Visual formatting model, 9.5 Floats

A float is a box that is shifted to the left or right on the current
line. The most interesting characteristic of a float (or "floated" or
"floating" box) is that content may flow along its side (or be
prohibited from doing so by the 'clear' property). Content flows down
the right side of a left-floated box and down the left side of a
right-floated box. The following is an introduction to float
positioning and content flow; the exact rules governing float behavior
are given in the description of the 'float' property.

A floated box is shifted to the left or right until its outer edge
touches the containing block edge or the outer edge of another float.
If there is a line box, the outer top of the floated box is aligned
with the top of the current line box.

If there is not enough horizontal room for the float, it is shifted
downward until either it fits or there are no more floats present.

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.

And here are a whole bunch of examples...

W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning

Floating Elements Within a Div, Floats Outside of Div. Why