Div Collapse After Float CSS

Div collapse when using float

You have to "clear" your floats. Floating elements takes them out of the normal block positioning of the page, so an element that is floated right breaks out of the parent container, collapsing the div. You can clear them, or the more concise and clever way is to add 'overflow: auto' to the parent container:

#actions
{
    background: blue; overflow: auto;
}

#buttons
{
    float: left;
    overflow: hidden;
}

#text 
{
    float: right;
    overflow: hidden;
}

Since "overflow: auto" can produce scrollbars in certain instances, I usually explicitly prevent that by specifying 'overflow: hidden' on children elements. This works reliably in my experience.

Float left causing page wrapper to collapse

When you set float on an element it will be out of the normal content flow, that causes the container to collapse on height. In your example, it equals to the height of the h1 tag, since it's the only child that not set to float, otherwise it will collapses to zero height.

You need to clear the floats to bring the normal layout back, there are a number of ways, here are the most popular ones:

.page {
  overflow: hidden;
}

or:

.page {
  overflow: auto;
}

or:

.page:after {
  content: "";
  display: table;
  clear: both;
}

jsFiddle

Floating elements causes the parent to collapse. HTML / CSS

Since you needed the reasons, I think this post explains it very well. Apart from reasons, it also has some solutions to tackle it.

About float:

 when an element is floated it is taken out of the normal flow of the document. 
 It is shifted to the left or right until it touches the edge of it's containing
 box or another floated element.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float

About clear:

The clear CSS property specifies whether an element can be next to floating 
elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.
When applied to non-floating blocks, it moves the border edge of the 
element down until it is below the margin edge of all relevant floats.
This movement (when it happens) causes margin collapsing not to occur.

When applied to floating elements, it moves the margin edge of the element
below the margin edge of all relevant floats. This affects the position of later
floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the 
same block formatting context.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

css float with border collapse

Its because the box 3 is now behind box 1.

What float means is, any content after the element will wrap in the opposite direction and also its flow will be reset i.e. it will start from the point where it should have been placed when the float element is removed from DOM.

For example
Float behaviour

As you can see the actual position of the paragraph starts from the initial position of 1.

What will happen when there is a block element of the same width and height instead of the paragraph?

Float behaviour with blocks of same width and height

Exactly!! It will go behind box 1. Why 3 is below 1? Because there is no space on the right. If we increase the box 3 width then it will wrap on left accordingly.

Float behaviour with a larger box wrapping

And so what will happen in your case?

Float final layout

Yes, box 3 will go behind box 1 and everything else is laid out accordingly.

Why an inline-block container doesn't collapse when contains only floated items?

Because inline-block generate a block formatting context

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. ^ref

and you can read in the MDN:

Formatting contexts affect layout, but typically, we create a new block formatting context for the positioning and clearing floats rather than changing the layout, because an element that establishes a new block formatting context will:
contain internal floats.
exclude external floats.
suppress margin collapsing.

CSS-Floated elements collapsing parent element

In this case you can use the css clearfix class. Define the clearfix class in your css:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

Use the clearfix class on the parent element, in your case on the #content element:

<div id="content" class="clearfix">
    [...]
</div>

Find more infos about clearing floats in this blog post.

Btw: welcome on stackoverflow :)

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