Document flow
1, the elements in the document flow characteristics:
Block elements: an exclusive line in the flow of the document; default width of the document flow of the parent element is 100%, the default height is softened content.
Inline elements: the size of the document itself only stream, if the line is not sufficient to accommodate a plurality of inline element will continue to the next line from left to right;
Height is softened content.
2, after the element from the document stream, the height width contents are stretched (inline element departing from the document flow will become block elements).
float
1, a block element arranged vertically in a default flow of the document, if desired block elements arranged in the page level, by making use of floating elements float from the document flow.
2, after the element from the document flow, below his element will move up immediately.
3, after the floating element will try to float the upper left or upper right of the page, until it encounters ** ** parent element border
(Body can be considered a border) or other floating elements.
Floating element will cover the flow of the document element (not a parent-child relationship if the two elements).
4, when the upper float element is a block element without floating, the floating element will not exceed the block elements (on a line).
5, the floating element will not exceed the top of its siblings (his party can not tolerate all floating elements, the other floating elements will wrap).
Height problem collapse
1, after sub-elements no content or floating, highly collapsed parent element, all the elements below will top up the page layout is confusing.
2, open the BFC element has the following features:
a, the vertical distance outside the parent element and the child elements will not overlap;
b, the floating element will not be overwritten;
c, ** float may comprise subelements **.
3, how to open (recommended): add elements to the parent overflow: hidden;
The following ie6 browser does not support the BFC, but can be solved by turning the zoom haslayout --- element to 1.
.box1{
zoom:1;
overflow:hidden;
}
Height collapse Solutions
1, Option One: Clear affect other floating elements of the current element with the clear.
Optional clear value: none not clear float;
left：清除左侧浮动元素对当前元素的影响；
right：清除右侧浮动元素对当前元素的影响；
both：清除两侧浮动元素对当前元素的影响；
（实际上是清除对当前元素影响最大的那个元素的浮动）
2、方案二：在高度塌陷的父元素最后添加一个空白的div。
用这个空白的div来撑开父元素的高度再对其消除浮动。
对空白div有：clear:both;
模板
clearfix:after{
content:"";
display:block;
clear:both;
}
clearfix{
zoom:1;
}
<div class="boxn clearfix">
<!--谁塌就给谁加clearfix-->