任务十~浮动、定位

一、文档流的概念指什么？有哪些方式可以让元素脱离文档流?

  • 文档里指元素在文档中的位置由元素在html里的位置决定，块级元素独占一行，自上而下排列；内联元素从左到右排列

  • 让元素脱离文档流的方式：

    • 浮动，通过设置float属性
    • 绝对定位，通过设置position:absolute
    • 固定定位，通过设置position:fixed

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: right;
}
.box2{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box3{
width: 50px;
height: 50px;
background: green;
position: fixed;
top:300px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<p>脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式脱离文档流的方式</p>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图

![脱离文档流效果图](http://upload-images.jianshu.io/upload_images/2453980-c38deaf48f3b55c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 二、有几种定位方式，分别是如何实现定位的，使用场景如何？
positon的定位方式有三种（整理自CSS权威指南）
- **position:relative**~元素框偏移某个位置，元素仍保持其未定位前的形状，它原本所占的空间仍保留；
- **position:ablosute**~元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或初始包含块；元素原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样
- **position:fixed**~元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
position: relative;
top: 100px;
left: 100px;
}
.box2{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box3{
width: 100px;
height: 100px;
background: orange;
position: fixed;
top:200px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图
![三种定位方式效果图](http://upload-images.jianshu.io/upload_images/2453980-a20f6c9a4b862e29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 三、absolute, relative, fixed 偏移的参考点分别是什么？
- absolute的参考点是离其最近设置了fixed、relative的父级（祖先）元素，如果父级元素没有，则一层一层往上找，最终到body元素
- relative的参考点是其原来自身的位置
- fixed的参考点是浏览器的窗口

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
background: #ccc;
}
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 200px;
left: 250px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
position: relative;
left: 20px;
top: 20px;
}
.box3{
width: 50px;
height: 50px;
background: green;
position: fixed;
top:50px;
right: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图
![三种定位效果图](http://upload-images.jianshu.io/upload_images/2453980-3d6e661a72e1e222.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 四、z-index 有什么作用? 如何使用?
- z-index的作用是当两个或多个元素放在一起的时候，其决定哪个元素放在“上层”
- **z-index只有在使用了定位属性即positon的元素上才可使用；有较高z-index值的元素比z-index值较低的元素离读者更近；z-index值是正负整数**，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
height: 500px;
background: gray;
margin: 100px auto 0 auto;
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
position: relative;
left: 20px;
top: 20px;
z-index: 2px;
}
.box3{
width: 50px;
height: 50px;
background: green;
z-index: 3;
}
</style>
</head>
<body>
<div class="wrapper">
<h3>position:relative</h3>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图

![z-index效果图](http://upload-images.jianshu.io/upload_images/2453980-767fd3cce0913c23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 五、position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？
 - position:relative使元素偏移时，其自身位置并未改变，处在文档流的原始位置；负margin使元素偏移时，自身位置改变并且会影响周边元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
height: 500px;
background: gray;
margin: 100px auto 0 auto;
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
position: relative;
left: 100px;
}
.box3{
width: 50px;
height: 50px;
background: green;
}
.box4{
width: 50px;
height: 50px;
background: pink;
margin: -20px;
}
</style>
</head>
<body>
<div class="wrapper">
<h3>position:relative</h3>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div>
<div class="box4"></div>
<div class="box3"></div>
</div>
</body>
</html>

效果图

![问题5](http://upload-images.jianshu.io/upload_images/2453980-37ebec78144b769d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
## 六、如何让一个固定宽高的元素在页面上垂直水平居中?
- 可以利用position定位的absolute和负margin使宽高固定的元素在页面上水平居中，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.box{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>

效果图
![垂直水平居中](http://upload-images.jianshu.io/upload_images/2453980-f066841d330b3b17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- **更多垂直居中方法[W3CPLUS](http://www.w3cplus.com/css/vertically-center-content-with-css)**

***
## 七、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征如下：
 - **元素浮动之后会从文档的正常流中删除**
 - **元素设置浮动后，会尽可能地向左或向右浮动，直到碰到父元素边框或其余浮动元素**
 - **元素浮动后会生成一个块级框，而不论这个元素是什么**
 - **浮动元素不会互相重叠**
 - **一个浮动元素的顶端不能比其父元素的内顶端更高**
 - **浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高**
 - **如果没有足够空间，浮动元素会被挤到新的一行；浮动元素必须尽可能的高**
 - **整理自CSS权威指南**
- 对其它浮动元素的影响：浮动元素会依次排在其之前浮动元素左边或右边，直到其父元素不能放下，将会被挤到新的一行，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动元素</title>
<style>
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 0 auto;
color: white;
}
.test1{
width: 200px;
height: 200px;
background: red;
float: left;
}
.test2{
width: 200px;
height: 200px;
background: green;
float: left;
}
.test3{
width: 200px;
height: 200px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
</body>
</html>

效果图
![对浮动元素的影响效果图](http://upload-images.jianshu.io/upload_images/2453980-9af179ed9deb1769.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 对普通元素的影响：浮动元素将会浮在页面上，其后的普通元素将会占据其原来位置，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动元素</title>
<style>
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.test1{
width: 200px;
height: 100px;
background: red;
color: white;
float: right;
}
.test2{
width: 100%;
height: 100px;
line-height: 100px;
background: pink;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">我是浮动元素</div>
<div class="test2">我是普通元素</div>
</div>
</body>
</html>

效果图
![对普通元素的影响效果图](http://upload-images.jianshu.io/upload_images/2453980-64fdec477a7307b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 对文字的影响：块级元素会忽略浮动元素，但块级元素内的内联则会留意浮动元素的边界，环绕着浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动元素</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 80%;
height: 500px;
border: 1px solid black;
margin: 100px auto 0 auto;
}
.test1{
width: 400px;
height: 100px;
background: red;
color: white;
float: right;
}
.test2{
width: 100%;
background: pink;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test1">我是浮动元素</div>
<p class="test2">我是文字文字文字??！我是文字文字文字！！我是文字文字文字！！我是文字文字文字?。∥沂俏淖治淖治淖郑。∥沂俏淖治淖治淖郑?！我是文字文字文字??！我是文字文字文字！！我是文字文字文字！！我是文字文字文字?。∥沂俏淖治淖治淖郑?！我是文字文字文字！！我是文字文字文字??！我是文字文字文字??！我是文字文字文字！！我是文字文字文字！！我是文字文字文字！！我是文字文字文字?。∥沂俏淖治淖治淖郑。∥沂俏淖治淖治淖郑?！我是文字文字文字??！我是文字文字文字?。∥沂俏淖治淖治淖郑。∥沂俏淖治淖治淖郑?！我是文字文字文字！！我是文字文字文字??！我是文字文字文字?。∥沂俏淖治淖治淖郑?！我是文字文字文字?。∥沂俏淖治淖治淖郑。∥沂俏淖治淖治淖郑?！我是文字文字文字??！我是文字文字文字?。?lt;/p>
</div>
</body>
</html>

效果图
![文字环绕着浮动元素效果图](http://upload-images.jianshu.io/upload_images/2453980-88abc6e38bd1452d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***
## 八、清除浮动指什么? 如何清除浮动?
 - 清除浮动是指清除浮动所带来的影响，比如由于浮动，父元素无法撑起高度，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧随其后；若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局
 - 可以通过**clear**属性来清除浮动（**清除浮动只能针对元素本身**）其值如下
  - left~在左侧不允许浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:left;
}
.box2{
clear: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了</div>
</div>
</body>
</html>

效果图
![清除左浮动](http://upload-images.jianshu.io/upload_images/2453980-5fdf453629291e66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 - right~在右侧不允许浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:right;
}
.box2{
clear: right;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了</div>
</div>
</body>
</html>

效果图
![清除右浮动](http://upload-images.jianshu.io/upload_images/2453980-1d5118def78b855c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- both~在左右两侧均不允许浮动元素，比如

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
width: 800px;
height: 800px;
margin: 0 auto;
border: 1px solid black;
}
.box1{
width: 100px;
height: 100px;
background: peachpuff;
float:left;
}
.box2{
width: 100px;
height: 120px;
background: pink;
float: right;
}
.box3{
clear: both;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了我要清除浮动了</div>
</div>
</body>
</html>

效果图
![both清除左右两侧浮动](http://upload-images.jianshu.io/upload_images/2453980-8a8fb7b7a781115d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




**版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源?。。。?*
最后编辑于 ：
?著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,100评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,308评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事?！?“怎么了？”我有些...
    开封第一讲书人阅读 159,718评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,275评论 1赞 287
  • ?港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,376评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,454评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,464评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,248评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,686评论 1赞 306
  • ?护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2赞 328
  • ?白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,817评论 4赞 337
  • ?日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,484评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2赞 351

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1赞 92
  • 1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例 概念：在CSS当...
    饥人谷_任磊阅读 646评论 0赞 3
  • 各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,527评论 0赞 8
  • 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征： 浮动元素会脱离正常的文档流，元...
    饥人谷_哈噜噜阅读 871评论 0赞 0
  • 戒指掉了 我说出来的时候，他佯怒着让我回去找 论理加撒娇，换来“以后别戴戒指” 无论眼睛还是声音，找不到一丝责备 ...
    simayk阅读 176评论 0赞 0