定位
流定位
普通流定位的元素不能通过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。
网友评论