1 文档流
文档流是浏览器默认的排版方式
文档流的排版方式是块级元素垂直排布,行内元素和行内块元素水平排布。
2 脱离文档流
脱离文档流是不按照文档流的排版方式进行排版,脱离后,元素不在布局中,不在流中占有位置,处于漂浮状态,后面的文档流中的元素会补上去。
会造成脱离文档流的情况:
- 浮动:给元素添加float属性,且属性值不为none。
- 定位:设置position为absolute和fixed。fixed会固定在窗口上,absolute会随着滚动条滚动
元素脱离文档流存在的问题:
- 会导致父元素高度塌陷可以
- 通过将父子元素放置在同一个BFC中解决,或者使用清除浮动
3 定位方式
- static:默认定位值,元素出现在正常的流中,会忽略top,bottom,left,right,z-index的设置
- relative:相对定位,不会脱离文档流,在文档流中占有位置,可以通过top,bottom,left,right的设置相对于其正常**(原先本身)**位置进行定位。可通过z-index进行层次分级。
- absolute:绝对定位,会脱离文档流,相对static定位以外的第一个父元素定位。
- fixed:固定定位,相对于浏览器窗口进行定位。
4 使用场景
- 设置水平居中