一、文档流的概念指什么？有哪种方式可以让元素脱离文档流?
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
网友评论