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