CSS核心概念归纳之定位和BFC

定位

流定位

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

浮动定位

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

相对定位

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

绝对定位

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

固定定位

相对于视口进行定位。

BFC

BFC全称是block format content即块级格式化作用域。

三个特征

• 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。

作者：肖潇_
链接：https://www.jianshu.com/p/a57d19b5742c