定位指的是更改元素的默认排列方式
1. 普通流定位 (文档流定位)
默认模式排列, 块级元素从上到下, 行级元素从左到右
2. 浮动定位
float:left/right/none;
特点:
浮动元素脱离文档流, 不在占据空间. 如果一行显示不下, 会自动换行 (可能被卡主), 添加了浮动的元素会变成块级元素 (也符合行内块的特点), 并且也可以设置 margin 属性.
影响:
元素浮动会由于脱离了自身的文档流, 影响后续元素布局
添加了浮动的元素会影响父元素的高度
解决方案:
清除自身元素前面的浮动
给父元素设置高度, 但是大部分情况下高度不固定 (不推荐)
给父元素加浮动, 但同时也会影响父元素的后续元素 (不推荐)
在父元素的最后添加一个空标签 (必须为块级元素), 并且设置属性 clear:both; 但如果页面空标签多了, 会影响性能
给父元素设置
overflow:hidden/auto;
给父元素设置如下属性 (推荐使用)
- :after {
- content:"";
- display:block;
- clear:both;
- height:0;
- line-height:0;
- visibility:hidden;
- }
3. 相对定位
position:relative;
保留自身空间 (脱离文档流), 相对于原来位置定位. 并配合偏移属性 left/right/top/bottom 一起使用.
4. 绝对定位
position:absolute;
不保留自身空间, 相对于离自身最近的已定位的祖先元素进行定位, 如果找不到, 就相对 body 进行定位. 并配合偏移属性 left/right/top/bottom 一起使用.
5. 固定定位
position:fixed;
永远相对于浏览器页面进行定位, 并配合偏移属性 left/right/top/bottom 一起使用.
6. 弹性布局定位
display:flex;
弹性定位是一种新的定位方式, 他自身具有一些计算能力, 可以减少在布局时的很多计算问题, 本文不多做介绍. 详情语法点击这里
来源: http://www.jianshu.com/p/78133d8f9db9