浮动、定位相关基础知识问答

一、问答

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

文档流指的是将窗口分成一行一行，元素按从左至右或从上至下的顺序摆放即为文档流。

有以下方式可以脱离文档流：
1、使用float；
如下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .normal-div{
        height: 400px;
        border: 20px solid red;
        background-color: pink;
    }
    .float-div{
        height: 100px;
        width: 100px;
        border: 10px solid green;
        background-color: #ccc;
        float: right;
    }

    
    </style>
</head>
<body>
 <div class="normal-div">我是正常的块级元素div</div>
 <div class="float-div"> 我是浮动的块级元素div</div>
</body>
</html>

float脱离文档流1.png

按正常的文档流，float-div应该位于normal-div的左下方，结果其位于右下方了，且该两个垂直的div外边距也未进行折叠；
另：1、值得注意的是float-div并没有浮动到normal-div的右上方，因为浏览器渲染时先渲染normal-div，渲染完成后再渲染float-div，因此此时float-div会在normal-div的右下方；若将<div class="normal-div">我是正常的块级元素div</div> 放在<div class="float-div"> 我是浮动的块级元素div</div>的后面，在float-div则会在normal-div的右上角；

float脱离文档流2.png

2、使用绝对定位、固定定位；

如下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .normal-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 5px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 20px;
        left: 20px;
    }
    .absolute-div{
        height: 200px;
        border: 15px solid blue;
        position: absolute;
        top: 150px;
        right: 300px;
    }
    
    </style>
</head>
<body>

 <div class="normal-div">我是正常的块级元素div</div>
 <div class="fixed-div">我是固定定位的块级元素div</div>
 <div class="normal-div">我是正常的块级元素div</div> 
 <div class="normal-div">我是正常的块级元素div</div> 
 <div class="normal-div">我是正常的块级元素div</div>
 <div class="absolute-div">我是绝对定位的块级元素div</div> 
 <div class="normal-div">我是正常的块级元素div</div> 
 <div class="normal-div">我是正常的块级元素div</div> 
</body>
</html>

固定及绝对定位脱离文档流.png

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

有四种定位方式
1、static 静态定位方式
其为文档的默认定位方式，不会脱离文档流，其会忽略top、 right、 bottom、 left、 z-index 等声明；
2、absolute 绝对定位方式
使用该定位方式其会脱离文档流，其会相对于static定位以外的第一个父元素进行定位，其支持top、 right、 bottom、 left、 z-index 等声明；
3、relative 相对定位方式
其会相对其正常位置进行定位，不会脱离文档流；
4、fixed 固定定位方式
相对窗口进行定位，其不会随着页面翻动而移动，其完全脱离文档流；

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

1、absolute偏移参考点
a、若指定了left/right、top/bottom，其会参考除static以外的第一个父元素的原始坐标点，若父元素没有定义定位方式其会往祖元素找里，若还没找到则继续往上找，直至找到为止，若均未找到，则会参考浏览器的左上角原点坐标；
另：当存在嵌套关系时，比如一个div里包裹了一个absolute元素，且该div定位方式已经确定，则absolute元素的参考点为div里内容区的左上角为参考点，如下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing:border-box;

    }
    .static-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 10px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 250px;
        left: 100px;
    }
    .absolute-div{
        height: 200px;
        border: 20px solid blue;
        position: absolute;
        top: 150px;
        left: 300px;
    }
    .relative-div{
        height: 200px;
        width: 400px;
        border: 10px solid yellow;
        background-color: #ccc;
        position: relative;
        top:100px;
        left:250px;
    }
    
    </style>
</head>
<body>

 <div class="static-div">我是正常的块级元素div</div>
 <div class="fixed-div">我是固定定位的块级元素div</div>
 <div class="static-div">我是正常的块级元素div</div>
 <div class="relative-div">我是相对定位的块级元素div
    <div class="absolute-div">我是绝对定位的块级元素div</div> 
 </div>

 <div class="static-div">我是正常的块级元素div</div> 
 <div class="static-div">我是正常的块级元素div</div> 
</body>
</html>

上述代码中 absolute-div定义了position: top: 150px; left: 300px;

absolute-div坐标如下：（560px，660px）

absolute-div坐标.png

而relative-div坐标如下：（250px，500px）

relative-div坐标.png

两者横坐标相减得 310px；纵坐标相减得160px；而relative-div的border宽度为10px，因此此时absolute-div的参考点为relative-div的内容区左上角；（将relative-div的border宽度变更为20px后，还是可以看出absolute-div的参考点为relative-div的内容区左上角）

b、若未指定left/right、top/bottom，但指定了其父元素的定位方式，则其会视内容区的元素而定进行摆放；如上面代码将absolute-div的position: top: 150px; left: 300px; 注释掉后会形成这样的情况：

注释后.png

c、若未指定left/right、top/bottom，且其父元素及父元素以上均未指定定位方式，其会脱离文档流，但其会定位在后出现的文档流的原始坐标上；如下述代码中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing:border-box;

    }
    .static-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 10px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 250px;
        left: 100px;
    }
    .absolute-div{
        height: 200px;
        border: 20px solid blue;
        position: absolute;


    }
    .relative-div{
        height: 200px;
        width: 400px;
        border: 10px solid yellow;
        background-color: #ccc;
        position: relative;
        top:100px;
        left:250px;
    }
    
    </style>
</head>
<body>

 <div class="static-div">我是正常的块级元素div</div>
 <div class="fixed-div">我是固定定位的块级元素div</div>
 <div class="static-div">我是正常的块级元素div</div>
 <div class="relative-div">我是相对定位的块级元素div </div>
 <div class="absolute-div">我是绝对定位的块级元素div</div> 
 <div class="static-div">我是正常的块级元素div</div> 
 <div class="static-div">我是正常的块级元素div</div>
 <div class="static-div">我是正常的块级元素div</div> 
</body>
</html>

运行后，可见下图

未指定位置及定位方式.png

2、relative偏移参考点

其参考点为其本身；运行如下代码，可见其相对自身偏移了（250px，100px）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing:border-box;

    }
    .static-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 10px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 250px;
        left: 100px;
    }


    
    .relative-div{
        height: 200px;
        width: 400px;
        border: 10px solid yellow;
        background-color: #ccc;
        position: relative;
        top:100px;
        left:250px;
    }
    
    </style>
</head>
<body>

 <div class="static-div">我是正常的块级元素div</div>
 <div class="fixed-div">我是固定定位的块级元素div</div>
 <div class="static-div">我是正常的块级元素div</div>
 <div class="relative-div">我是相对定位的块级元素div </div>
 <div class="static-div">我是正常的块级元素div</div> 
 <div class="static-div">我是正常的块级元素div</div>
 <div class="static-div">我是正常的块级元素div</div> 
</body>
</html>

相对定位.png

3、fixed 偏移参考点为浏览器窗口本身，与页面无关，即滚动页面其不会随之移动，而是固定在窗口的指定位置上；

运行上述代码后，可见fixed-div一直固定在（100px 250px）上不动；

fixed定位.png

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

其可设置各个定位元素面向用户的层次顺序；其值越大，则表明越在页面的外层；例如如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
      margin: 0px;
      padding: 0px;
      box-sizing:border-box;

  }
  .static-div{
      height: 200px;
      border: 10px solid red;
      background-color: pink;
      z-index: 0;
  }
  .fixed-div{
      height: 40px;
      border: 10px solid green;
      background-color: #ccc;
      position: fixed;        
      top: 250px;
      left: 100px;
      z-index: 1;
  }
  .absolute-div{
      height: 200px;
      border: 20px solid blue;
      position: absolute;
      top: 150px;
      left: 300px;

  }
  .relative-div{
      height: 200px;
      width: 400px;
      border: 10px solid yellow;
      background-color: #ccc;
      position: relative;
      top:100px;
      left:250px;
      z-index: 2;
  }

  </style>
</head>
<body>

<div class="static-div">我是正常的块级元素div</div>
<div class="fixed-div">我是固定定位的块级元素div</div>
<div class="static-div">我是正常的块级元素div</div>
<div class="relative-div">我是相对定位的块级元素div
  <div class="absolute-div">我是绝对定位的块级元素div</div> 
</div>

<div class="static-div">我是正常的块级元素div</div> 
<div class="static-div">我是正常的块级元素div</div> 
</body>
</html>

z-index使用举例.png

加入z-index后，relative-div在fixed-div的前面，正常如果不设置的话，fixed-div应该在relative-div的前面；

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

区别是使用position:relative ，该元素原来的位置不会脱离文档流，即使用时可能会出现空白的情况，而负margin则不存在这样的情况；

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

可采用绝对定位再使用负margin的方式，具体见下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
      margin: 0px;
      padding: 0px;
      box-sizing:border-box;

  }

  .normal-div{
      height: 400px;
      width: 200px;
      border: 10px solid green;
      background-color: #ccc;
      position: absolute;
      top: 50%;
      left:50%;
      margin-left: -100px;
      margin-top: -200px;

  }

  </style>
</head>
<body>

<div class="normal-div">我是正常的块级元素div</div>

</body>
</html>

运行结果如下：

垂直水平居中.png

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

浮动元素会脱离文档流；

碰到其他浮动元素其并不会忽略；
遇见块级元素其会完全忽略浮动元素，但遇到块级元素中的内联元素或直接的内联元素，内联元素会环绕该浮动元素；
遇见文字时，文字会环绕在浮动元素周围；

（八）清除浮动指什么? 如何清除浮动?

清除浮动指的是不允许对应的元素（即该设置的元素）左边、右边或两边存在浮动元素；
1、清除上级元素的浮动方法如下：clear:right/left/both ；
例如见下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
      margin: 0px;
      padding: 0px;
      box-sizing:border-box;

  }
  .normal-div{
    height: 200px;
    width: 1000px;
    border: 10px solid yellow;
    background-color: #ccc;
    clear: right;


  }
  .float-div{
    height: 200px;
    width: 400px;
    border: 10px solid green;
    background-color: pink;
    float: right;

  }

  </style>
</head>
<body>

<div class="normal-div">我是正常的块级元素div</div>
<div class="float-div">我是<em>浮动的</em>块级元素div</div>
<div class="normal-div">我是正常的块级元素div</div>

</body>
</html>

清除浮动.png

上述代码清除浮动后，第二个normal-div 位置偏移至下一行了，其右边不再有浮动元素了。

2、清除父元素中的子元素的方法（在父元素中加清除浮动！）有如下几种：

前后缀法

.clearfix:before, .clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1; /* for ie 6,7*/
}

overflow法

 .clearfix{
    overflow:hidden;
    _zoom:1; /* for ie 6*/
}

二、代码

（一）写出如下两栏布局, 其中中间区块宽度900px, 居中,左侧边栏宽度200px, 右侧边栏宽度700px
1、做完可参考范例
2、ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动。
3、ps: aside左浮动，main左浮动
4、凡是有浮动的地方，其直接父元素必须清除浮动

代码详见此处--按要求浮动或此处--按自己思路

（二）不适用背景图片实现如下效果

Paste_Image.png

范例

代码详见此处---非伪类或此处--伪类法

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

最后编辑于：2017.12.03 08:54:37

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