CSS 核心概念概括之定位和 BFC

定位

流定位

普通流定位的元素不能经过left/top属性来指定其x/y坐标，流定位的元素上下排布的区块元素的纵向边距会被合并，左右排布的内联元素的横向边距不会合并，须要各自独立计算。

浮动定位

浮动模型是一种可视化格式模型，浮动的框能够左右移动，直到它的外边碰到包含框或者另一个浮动的元素边框。浮动元素不在普通的文档流中，文档的普通流元素表现的就像浮动的元素不存在同样。

相对定位

相对定位的元素会在文档中占据原来的位置，只是表现出来的位置会改变。

绝对定位

绝对定位的元素位置与文档流无关，也不会占据文档流的空间，普通流中的元素布局就像绝对定位的元素不存在同样。

固定定位

相对于视口进行定位。

BFC

BFC全称是Block Formatting Context即块级格式化上下文。

三个特征

• BFC会阻止垂直外边距的折叠。(当同属一个BFC时，两个元素有可能发生垂直的重叠，要解决margin重叠，只要让他们不在同一个BFC就好了，对于两个相邻的元素来讲，意义不大，没有必要给他加一个外壳，可是对于嵌套元素来讲就颇有必要了，只要把父元素设置为BFC就好了，这样元素的margin就不会和父元素的margin重叠了)
• BFC不会重叠浮动元素
• BFC能够包含浮动

造成BFC的条件

• float:left|right
• overflow:hidden|auto|scroll
• display:table-cell|table-caption|inline-block
• position:absolute|fixed

通用的清除浮动的方式

.clearfix {
    *zoom: 1;
}

.clearfix::after {
    content: '';
    display:block;
    height: 0;
    visibility: hidden;
    clear:left;
}复制代码

.clearfix {
  *zoom: 1;
}
.clearfix::after {
    content: '';
    display: table;
    clear:both;
}复制代码

总结

清除浮动只有两种方式，一是使用clear属性清除浮动，二是使父容器造成BFC。