10.浮动、定位

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

1、文档流指的是元素在排列布局中所占用的位置，具体的说是将窗体自上而下分为一行行，并在每行中按从左到右的顺序排放元素。
每个非浮动的块级元素都独占一行，若设置了浮动，它就会按照设置的规则浮动在行的一端，如果当前行放置不下，则另起新行再浮动。内联元素不会独占一行。
2、有三种方法可以让元素脱离文档流，分别是浮动：float，绝对定位：position：absolute，固定定位：position：fixed。
3、拓展：文档流和文本流的区别
①文档流是相对于盒模型的概念，而文本流是相对于段落文字的概念。
②元素浮动之后，会脱离文档流，它后面的块级元素感知不到浮动元素的存在，就会无视它原来占据的区域，直接在它上面布局。
但是文字却会认同浮动元素所占据的区域，围绕它布局，所以浮动元素没有脱离文本流。
③如果使用绝对定位之后，元素既会脱离文档流，也会脱离文本流。那么后面元素的文本就不会在认同它占据的区域，会直接在它上面布局，就不会环绕。
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .box1{
        height: 100px;
        width: 100px;
        background:red;
        float: left;
    }
    .ct{
        height: 200px;
        width:200px;
        background:#ccc;
        margin-top: 40px
    }
    .box2{
        height: 100px;
        width: 100px;
        background:blue;
        position: absolute;
    }
    .footer{
        position: fixed;
        bottom: 10px;
        left: 10px;
        height: 100px;
        width: 200px;
        background:yellow;
    }
</style>
</head>
<body>
    <div class="ct">
        <div class="box1"></div>
        <p>
            比如网页的div标签它默认占用的宽度位置是一整行
            ，p标签默认占用宽度也是一整行，因为div标签和p标
            签是块状对象。 网页中大部分对象默认是占用文档流，
            也有一些对象是不占文档流的，
        </p>
    </div>

    <div class="ct">
        <div class="box2"></div>
        <p>
            比如网页的div标签它默认占用的宽度位置是一整行
            ，p标签默认占用宽度也是一整行，
            因为div标签和p标签是块状对象。 网页中大部分对象默
            认是占用文档流，也有一些对象是不占文档流的，
        </p>
    </div>

    <div class="footer">jirengu</div>
</body>
</html>

Paste_Image.png

二、有几种定位方式，分别是如何实现定位的，使用场景如何？

答：有四种定位方式。分别是：静态定位、相对定位、绝对定位和固定定位。对应position属性有四个值：static、relative、absolute、fixed，默认值为static。
除了static以外，其他的定位方式都可以设定“top、right、bottom、left”属性，指明元素相对于另一个元素所移动的位置。

1.在静态定位的情况下，每个元素处在常规文档流中。块级元素会在页面中自上而下地堆叠起来，行内元素会相互并列，直到空间不足以并列的情况下才会折到下一行显示。
2.相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。
3.绝对定位会把元素彻底从文档流中拿出来，不占据它原本该占据的位置。它需要参考它的定位上下文来移动位置。绝对定位元素的任何祖先元素都可以成为它的定位上下文，只需要把相应祖先元素的position设为relative即可。如果没有相对定位的祖先元素可以参考，则以默认的定位上下文body作为参照，相对于它进行定位。
4.固定定位也是完全移出文档流，但它的定位上下文是视口（浏览器窗口或手持设备的屏幕），它的特点是不会随页面滚动而滚动。最常见的情况是用它创建不随页面滚动而移动的导航元素。（乍一看很像绝对定位，但它不随着页面滚动而移动，绝对定位会移动）
示意图可以参考 CSS中的绝对定位与相对定位

三、absolute, relative, fixed 偏移的参考点分别是什么？

absolute偏移参考点是static定位以外最近的一个祖先（父）元素,如果没有则相对于原始的容器body。

relative偏移参考点是自己在文档流中原来的位置。

fixed偏移参考点是浏览器窗口。
参考：关于CSS定位中的位置

四、z-index 有什么作用? 如何使用?

1、z-index的作用：页面显示的是一个二维平面，用x轴和y轴来表示位置属性。为了表示三维立体的概念比如显示元素的上下层的叠加顺序，所以引入了z-index属性来表示z轴的区别。比如说页面的x轴向右，y轴向下那么z轴就是垂直于xy平面里。
表示一个元素在叠加顺序上的上下立体关系。
2、使用：z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
参考z-index

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        height: 127px;
        width: 300px;
        background:#ccc;
        position: relative;
    }
    .container .box{
        height: 100px;
        width: 100px;
        background:red;
        position: inherit;
    }
    .container .box:nth-child(1){
        background:red;
        z-index: 1;
    }
    .container .box:nth-child(2){
        background:yellow;
        z-index: -1;
    }
</style>
</head>
<body>
    <div class="container">3
        <div class="box">1</div>
        <div class="box">2</div>
    </div>
</body>
</html>

Paste_Image.png

使用z-index要注意下面几点：
1、只对定位元素有效。
z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的元素），用来确定定位元素在垂直于页面方向（称为Z轴）上的层叠顺序，也就是说如果元素没有设置定位，对其设置的z-index是无效的。
2、相同z-index谁上谁下
①如果两个元素都没有定位或者两个都是定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
②如果两个元素都没有设置z-index（使用默认值，默认不设置z-index时值是0），一个定位一个没有定位，那么定位元素覆盖未定位元素。
3、父子关系处理
①如果定位父元素z-index设置值除了默认值外，那么定位子元素无论是否设置z-index或设置多少值，z-index都会不起作用，定位子元素都会在定位父元素上面。
②如果父元素z-index未定位或者使用默认值，那么定位子元素设置z-index会起作用，子元素可以在父元素的下面或下面。
4、兄弟之间子元素
①如果定位兄弟元素的z-index生效，那么它们的子元素覆盖关系由父元素层级决定，不管它们子元素z-index的各自大小。
参考:z-index应用总结

五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？

用position:relative使元素偏移时，它自身位置并未改变，仍然处在文档流的原始位置，偏移的元素不会对下面元素位置产生影响，只是该元素自己相对于原来位置偏移。

设负margin的时候，偏移的元素自身位置改变,不再占据初始空间，还会对其他元素位置产生影响。

设置margin的时候是相邻元素之间的偏移，相对于相邻元素的border，否则设置的margin将无效。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    body{
        margin:0px;
        padding: 0px;
    }
    .container{
        display: inline-block;
        height: 300px;
        width: 200px;
        border: 1px solid;
    }
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
    }
    .container .box:nth-child(1){
        background:red;
    }
    .container .box:nth-child(2){
        background:blue;
    }
    .container .box:nth-child(3){
        background:yellow;
    }
    .margin{
        margin-top: -30px;
        margin-left:30px; 
    }
    .relative{
        position: relative;
        left: 30px;
        top: -30px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box normal">这是正常的box</div>
        <div class="box">2</div>
    </div>

     <div class="container">
        <div class="box">1</div>
        <div class="box margin">这是负margin的box</div>
        <div class="box">2</div>
    </div>

     <div class="container">
        <div class="box">1</div>
        <div class="box relative">这是relative的box</div>
        <div class="box">2</div>
    </div>
</body>
</html>

Paste_Image.png

可以看出，设置负margin时，元素的原来的空间被1占据，元素好像没有偏移，而container整体向下偏移，而且container内部的底部出现了空白。
这里还有些模糊，搞不清楚？

六、如何让一个固定宽高的元素在页面上垂直水平居中?

1、可以使用absolute和负margin实现。
首先在父元素上设置定位，提供一个坐标的参考点，然后对元素设置position：absolute；top：50%;left：50%；，此时元素的左上角在正中心的位置，再设置负margin偏移该元素宽高的一半margin-left：-a；(a为该元素宽高的一半)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    body{
        margin:0px;
        padding: 0px;
    }
    .container{
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background:#ccc;
    }
    /*这样设置容器等于body，相对于页面*/
    .box{
        position: absolute;
        top: 50%;  
        left: 50%;
        /*box左上角的位置偏移到父元素宽度和高度的一半，也就是父元素的正中心*/
        margin-left: -50px;
        margin-top: -50px;
        /*box偏移本身宽高的一半，也就是整个都在页面正中心*/
        height: 100px;
        width: 100px;
        background:red;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Paste_Image.png

七、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

1、浮动元素的特征:
①浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框脱离了文档流，所以文档流中的块框表现得就像浮动框不存在一样。
②浮动元素如果没有设置宽高，会自动“收缩”，那它的宽高就是自身的内容。
③无论什么元素设置浮动后都会变成块级元素。
④浮动元素对于其他浮动元素，先浮动的元素不会被后浮动的元素超过，浮动元素不会彼此重叠。
⑤浮动元素对于文字，则是“可见”的，会把文字给“顶开”，形成文字包围浮动元素。
⑥当行框没有足够空间，浮动元素会被挤到新的一行
⑦浮动重叠规则：
行内框与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在浮动元素之下，而内容不在浮动元素之下显示。参考：浮动元素

2、对其他浮动元素、普通元素、文字的影响
①对其它浮动元素的影响：后面的浮动元素会会跟随其浮动，直到遇到前面浮动元素的边框。如果父容器放不下，它会自动下移到新的一行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        width:250px;
        height:300px;
        border:1px solid;
    }
    .box{
        height:100px;
        width:100px;
        border:1px solid;
    }
    .container .box:nth-child(1){
        background:red;
        float:right;
    }
    .container .box:nth-child(2){
        background:blue;
        float:right;
    }
    .container .box:nth-child(3){
        background:green;
        float:right;
    }
    .container .box:nth-child(4){
        background:yellow;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>
</html>

Paste_Image.png

②对普通元素的影响:同级关系的普通块级元素会忽略浮动元素的存在,占据它的位置；父子级关系的子元素浮动的话，父容器的高度会塌陷。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
    }
    .container{
        border: 1px solid red;
        width: 300px;
    }
    .box1{
        background:red;
        float: left;
    }
    .box2{
        background:blue;
        width: 200px;
    }
    .container .box:nth-child(1){
        background:gray;
        /*float: left;*/
    }
    .container .box:nth-child(2){
        background:yellow;
        float: left;
    }
</style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="container">
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>
</html>

Paste_Image.png

说明：父容器塌陷的原因是子元素浮动后就是脱离文档流，然后不占据原来空间，所以父容器的高度会收缩。

** ③对文字的影响**:浮动元素脱离了文档流，块级元素感知不到浮动元素的存在，但浮动元素对块级元素里的文字产生影响，文字会环绕着浮动元素布局。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        height: 300px;
        width: 300px;
        border: 1px solid;
    }
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
        background:blue;
        float: left;
    }
    p{
        border: 1px solid red;
    }
</style>
</head>
<body>
  <div class="container">
        <div class="box"></div>
        <p>这样会得到我们希望的效果。不幸的是，
下一个元素会受到这个浮动元素的影响。
为了解决这个问题，有些人选择对布局中的所有东西进行浮动
，然后使用适当的有意义的元素（常常是站点的页脚）
对这些浮动进行清理。这有助于减少或消除不必要的标记。
        </p>
    </div>
</body>
</html>

Paste_Image.png

八、清除浮动指什么? 如何清除浮动?

1、清除浮动是指清除浮动带来的影响。主要有对上级元素和同级元素的影响。对上级元素的影响比如浮动元素不会撑起父元素的高度，影响与父元素的同级元素。对同级元素的影响比如同级元素会占据浮动元素原来的空间，而我们需要这个空间不被占用。
2、另外的说法，在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
3、注意：清除浮动是针对元素本身的，只能对自己有效果，不能够影响到别的元素

4、 清除浮动常用的方法：
①使用clear属性
clear 属性规定元素的哪一侧不允许其他浮动元素

Paste_Image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        border: 1px solid;
        width: 400px;
    }
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
    }
    .container .box:nth-child(1){
        background:red;
        float: left;
    }
    .container .box:nth-child(2){
        background:blue;
        clear:left;
    }
    .ct{
        border: 1px solid;
        width: 400px;
    }
    .ct .box:nth-child(1){
        background:yellow;
        float:right;
    }
    .ct .box:nth-child(2){
        background:gray;
        float: right;
        clear: right;
    }
    .clearfix{
        clear: both;
    }
</style>
</head>
<body>
   <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
    </div> 
    <div class="ct">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="clearfix"></div>
    </div> 
</body>
</html>

Paste_Image.png

②使用伪元素(其实本质上就是用clear)
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动.

Paste_Image.png

③父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。
overflow:hidden 的意思是超出的部分要裁切隐藏掉，那么如果 float 的元素不占普通流位置，普通流的包含块要根据内容高度裁切隐藏，如果高度是默认值auto，那么不计算其内浮动元素高度就裁切，就有可能会裁掉float，这是违反布局常识的。
所以如果没有明确设定容器高情况下，它要计算内容全部高度才能确定在什么位置hidden，浮动的高度就要被计算进去，顺带达成了清理浮动的目标。

Paste_Image.png

参考：
清除浮动
BFC
深入理解BFC和Margin Collapse

最后编辑于：2018.07.06 07:14:05

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

10.浮动、定位

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

二、有几种定位方式，分别是如何实现定位的，使用场景如何？

三、absolute, relative, fixed 偏移的参考点分别是什么？

四、z-index 有什么作用? 如何使用?

五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？

六、如何让一个固定宽高的元素在页面上垂直水平居中?

七、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

八、清除浮动指什么? 如何清除浮动?

推荐阅读更多精彩内容