After we understand the highly collapsed problem, how to solve the problem then the height of collapse ?
The solution height of a problem:
Principle Solving the Problems: According to the W3C standard element has a hidden attribute (Block Formatting Context) referred to the BFC, the block level format, this property can be set to open or closed, after opening when the BFC, will have the following elements characteristic:
1. Vertical outside from the parent element and the child elements will not overlap.
2. Open BFC elements are not covered with the floating element.
3. Open the BFC element may contain sub-elements floating.
Option One : Direct specify the height of the parent element, assuming the child element is 200px, then the height of the parent element is also set to 200px; to avoid collapse of the problem.
Disadvantages: Once the height of the parent element is designated as a fixed value. The height of the parent element does not automatically adapt to the height of the sub-elements, so this solution is not recommended.
To turn BFC ( no direct method of BFC open, but during operation can be provided by indirect element open float )
1. Set the floating elements
When the sub-element box1 provided when the float position, also be provided to the parent element box float position. It was found that although the height of the parent element is softened, but if you do not set width, the width of the original default occupy one line becomes ineffective (the width of the quilt becomes an element of distraction elements), while the box2 box still moving up . Not recommended
2. Set the element absolute positioning
After setting the parent element to absolute positioning, the original default width Failure (quilt Width becomes a distraction element), BOX2 box still moved upward. Not recommended
3. Set inline-block element
Child element holding box1 float: left floating positioning, the parent element disposed box display: inline-block within the block elements into rows, BOX2 box no longer move, but the failure of the original default width (the width of the quilt becomes distraction element ) is not recommended
4. The element over-flow (excess) set to a value of non-visible
Value memory over-flow properties are visible (the default value), hidden, scroll, auto. Non-visible values are hidden, the Scroll, Auto .
First, try to box the parent element is set to overflow: scroll; width is retained, height quilt element distraction, box2 box did not take the opportunity to move on, the page layout is perfect. But the scroll bar with the scroll attribute value is very unsightly. Try other property worth trying.
Sets the parent element attribute overflow: auto; perfect results
Parent element overflow: hidden;
Recommended way: the overflow is set to hidden BFC open the easiest way to solve the overflow easiest way is to set overflow: hidden;
Browser Compatibility: this setting, Chrome browser support, Firefox browser support, IE IE6 browser version and the browser does not support this setting. So this way is not compatible with the version of IE6 and below.
Although not in IE6 BFC, but there is another hidden property hasLayout, if you want to turn on hasLayout, directly zoom to the element 1 can be. (Zoom: shows an enlarged, followed by amplification of multiple values behind; zoom: 1 means no amplification) zoom only supported in IE browser, other browsers do not support.
If you want next is compatible with all versions of the browser are written in two ways, both have overflow zoom.
Solve highly ending collapse of the two methods
In understanding this method, first take a brief look at the clear property (only clear the influence of siblings, can not remove the influence of the parent element)
clear Clears the value of the property:
none：不清除浮动；
left：左侧不允许出现浮动，清除左侧浮动元素对当前元素产生的影响；
right：右侧不允许出现浮动，清除右侧浮动元素对当前元素产生的影响；
both：清除对元素影响最大的浮动。
清楚了clear属性清除的用法之后，就可以运用到解决高度塌陷。
当为父元素中的子元素设置了向浮动时。为box1设置向左浮动。就会发现子元素的位置没变，但是父元素box发生了高度坍塌
为box1盒子的兄弟元素box2 设置clear属性
解决高度塌陷方案二：
优点
可以直接在高度塌陷的父元素最后添加一个空白的div，由于这个div并没有设置浮动，所以他可以撑开父元素的高度的。
再对其进行清除浮动（clear），通过这样可以通过这个空白的div来撑开父元素的高度。
相比于上面的使用overflow属性清除浮动，更加建议使用此方案，副作用相对而言更少（基本没有），而且可以兼容所有的浏览器。
缺点：
因为div属于HTML元素，HTML属于结构部分，所以使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
假如既不想添加结构，又希望可以解决高度塌陷问题
解决办法：通过after伪类，选中box父元素的后边。
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动。这样做和添加div原理一样，可以达到一个相同的效果。
而且不会在页面添加多余的div（结构），最推荐使用的方式，几乎没有副作用。
使用clearfix属性，清除修复。
给box添加一个clearfix的属性
设置clearfix属性值，其中最为关键的三点是：
这是最推荐使用的一种方式。但是在IE6中不支持 :after伪类。如果想在IE6中显示开启hasLayout，设置zoom:1。