浮动与定位

作者: 婷楼沐熙 | 来源:发表于2016-07-10 21:21 被阅读450次

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

文档流是指元素在排列布局中所占用的位置。具体来说就是页面在在布局的时候，自上而下地分成一行一行，并且在每一行中元素都是从左至右依次排放。
没有设置浮动的块级元素都会独占一行，若设置了浮动，则它会按照设置的规则浮动在某行的某一端，如果放置不下，则另起一行再进行浮动。
行内元素不会独占一行。
这里要注意区分一下文档流和文本流。
文档流是相对于盒模型的概念，而文本流是相对于段落文字的概念。
元素设置浮动之后，会脱离文档流，块级元素感知不到浮动元素的存在，直接在它上面布局。但是浮动元素对文字有影响，文字会环绕浮动元素布局，所以浮动元素没有脱离文本流。不过如果使用绝对定位之后，元素既会脱离文档流，也会脱离文本流。
有以下三种情况会使得元素脱离文档流：
浮动： float
绝对定位： position: absolute
固定定位： position: fixed

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>文档流</title>
    <style>
    h1{
        background: #ccc;
    }
    strong{
        background: pink;
    }
    span{
        background: yellow;
    }
    .box{
        width: 100px;
        height: 100px;
    }
    .container .box:nth-child(1){
        float: left;
        background: red;
    }
    .container .box:nth-child(2){
        position: absolute;
        left: 80px;
        top: 150px;
        background: orange;
    }
    .container .box:nth-child(3){
        position: fixed;
        top: 100px;
        right: 100px;
        background: green;
    }
    </style>
</head>
<body>
    <h1>块级元素独占一行</h1>
    <strong>行内元素会排列在同一行，</strong>
    <span>直到一行放不下就换行。</span>
    <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    </div>
    <p>CSS 有三种基本的定位机制：普通流（文档流）、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 </p>
</body>
</html>

效果

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

定位是由position属性来实现的，它可以使元素精确地出现在它的相对位置。这里的相对可以是：相对于它本身原来出现的位置、相对于它祖先元素的位置、相对于另一个元素的位置或者相对于浏览器窗口的位置。而这个位置就由这个元素的包含块来决定。
position常用的值如下：

值	含义	使用场景（举例）
inherit	从父元素继承 position 属性的值	和父元素重叠
static	这是默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明），没有特殊定位。	一般来说不用写，除非想要覆盖之前设置的定位。
relative	生成相对定位的元素，坐标相对于本身原来的位置。元素位置偏移，其他元素位置不变。需要注意的是：无论是否进行移动，元素仍然占据原来的空间，移动元素会导致它覆盖其它元素。	和absolute一起使用，常用于logo的定位。
absolute	生成绝对定位的元素，相对于static定位以外最近的一个祖先（父）元素进行定位,如果没有则相对与原始的容器。元素的位置通过 left, top, right以及 bottom属性进行规定。	同relative
fixed	悬浮，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right以及 bottom属性进行规定，它不随滚动条滚动。可以通过z-index进行层次分级。	广告窗口
sticky	这是CSS3新属性，表现类似`position:relative`和`position:fixed`的合体。当在目标区域在屏幕中可见时，它的行为就像`position:relative`; 而当页面滚动超出目标区域时，它的表现就像`position:fixed`，它会固定在目标位置。	搜索框

下面简单的举个例子吧。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>position</title>
    <style>
    .container{
        position: relative;
        width: 500px;
        height: 500px;
        background: #ccc;   
    }
    .box{
        width: 50px;
        height: 50px;
        border: 5px dashed;
        margin: 10px;
        padding: 10px;
    }
    .container .box:nth-child(1){
        position: relative;
        background: yellow;
        left: 30px;
        top: 20px;
    }
    .container .box:nth-child(2){
        position: absolute;
        background: orange;
        left: 30px;
        top: 20px;
    }
    .container .box:nth-child(3){
        background: pink;
    }
    div:nth-child(4){
        position: fixed;        
        bottom: 0px;
        height: 50px;
        width: 100%;
        background: purple;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div>4</div>
    </div>
</body>
</html>

效果图

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

absolute：偏移的参考点是相对于最近的设置了定位（static除外）的父级（祖先）元素，如果没有满足要求的祖先元素，则相对于body元素。
relative：相对于自己在普通流中原来的位置进行偏移。
fixed：相对于浏览器窗口进行偏移。
具体的细节可以参考我的另外一篇文章关于CSS定位中的位置。

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

页面显示的是二维平面，用x轴和y轴来进行描绘。为了使显示的元素具有三维立体的概念，对元素进行叠加。引用了z-index属性来表示z轴。比如说页面的x轴向右，y轴向下那么z轴就是垂直于xy平面向里，
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>z-index</title>
    <style>
    .container{
        width: 300px;
        height: 300px;
        background: #ff5;
    }
    .box{
        position: relative;
        width: 100px;
        height: 100px;
        background: pink;
        top: -50px;
    }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="box"></div>
</body>
</html>

效果图
在上面的.box样式里面增加一句，z-index: -1;，它的效果为：

z-index效果
使用z-index要注意以下几点：

只对定位元素有效
z-index只对设置了position属性值为 relative 、 absolute 或 fixed的元素有效，用来表示元素在垂直与页面方向上的叠加次序。如果没有设置定位，使用z-index是没有效果的。
z-index值相同
如果两个元素都没有定位或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
如果两个元素都没有设置z-index（使用默认值），一个定位一个没有定位，那么定位元素覆盖未定位元素。

详细的可以参考饥人谷课件z-index应用简单总结

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

负边距就是把margin属性的值设为负数，当把margin-bottom、margin-right设为负数的时候，元素本身并不会发生偏移，但是后面的元素会进行上移、左移。
当把元素的margin-top、margin-left设为负数的时候，不仅元素本身会上移、左移，也会影响到后面的元素发生位置偏移；但是position: relative的元素设置top、left之后，只有元素本身会发生偏移，它还占据着原来的位置，后面的元素不会受到影响。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>偏移</title>
    <style>
    .container{
        width: 300px;
        height: 200px;
        border: 1px solid;
        margin: 20px;
    }
    .box{
        width: 70px;
        height: 50px;
        border: 1px solid;
    /*  display: inline-block;*/
        font-size: 10px;
    }
    .container .box:nth-child(1){
        background: yellow;
    }
    .container .box:nth-child(2){
        background: pink;
    }
    .container .box:nth-child(3){
        background: red;
    }
    .test{
        margin-bottom: -20px;
        margin-right: -20px;
    }
    .margin{
        margin-top: -20px;
        margin-left: -20px;
    }
    .position{
        position: relative;
        top: -20px;
        left: -20px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box test">2 设置下、右margin</div>
        <div class="box">3</div>
    </div>
    <div class="container">
        <div class="box">4</div>
        <div class="box margin">5 设置上、左margin</div>
        <div class="box">6</div>
    </div>
    <div class="container">
        <div class="box">7</div>
        <div class="box position">8 relative</div>
        <div class="box">9</div>
    </div>
</body>
</html>

效果对比
疑惑：当我在.box里面设置了display: inline-block;之后，设置margin各个方向的偏移量时，结果有点乱。因为我在各个div里面写的字数不相同，它们偏移的结果都不一样，这一点没有很清楚是什么原因。删掉那句之后好像偏移就正常了。元素的对齐方式是不是里面的文字有关，它会根据文字对齐。

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

使用绝对定位和负margin可以使固定宽高的元素在页面上垂直水平居中。先对元素设置position: absolute; top: 50%; left: 50%;，此时元素的左上角在正中心的位置。再利用负margin偏移它宽高的一半，margin-left: -50px; margin-top: -50px;。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>垂直水平居中</title>
    <style type="text/css">
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .ct{
        position: absolute;  /*也是一个定位元素，box还是相对于这个祖先元素*/
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;     /*一个满屏的元素，然后让它在正中心，比如说可以利用这个做一个弹窗*/
        /*height: 500px;*/
        background: rgba(0,0,0,0.5);
    }
    .box{
        position: absolute;
        top: 50%;
        left: 50%;   /*box的左上角相对于ct的百分之五十，现在左上角是在正中心的位置，再利用负margin，让它偏移宽高的一半*/
        margin-left: -50px;
        margin-top: -50px;   /*偏移宽高的一半，现在整个位置就在正中心*/
        
        width: 100px;
        height: 100px;
        background: #fff;
        margin: ;
    }
    </style>
</head>
<body>
    <div class="ct">
        <div class="box"></div> 

    </div>
</body>
</html>

垂直水平居中

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

在html当中，元素分为块级元素和行内元素，块级元素独占一行，行内元素并排显示，直到放不下就另起一行。行内元素没有宽高，每一行的高度由一行内最高的元素为标准。为了让块级元素可以并排显示，就出现了浮动。当然将display设置为inline-block也可以使块级元素并排显示，但是它只能从左至右依次排列，而浮动可以实现从左或者右两个方向。
浮动元素会脱离文档流，但是它仍然会影响到布局。后面的浮动元素会跟随其浮动，直到遇到浮动元素的边框；后面的普通元素会忽略浮动元素的存在，占据原来的文档流位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>float</title>
    <style>
    .container{
        width: 300px;
        height: 300px;
        border: 5px solid;
    }
    .box1, .box2, .box3{
        width: 100px;
        height: 100px;
    }
    .box1{
        background: pink;
        float: right;
    }
    .box2{
        background: yellow;
        float: right;
    }
    .box3{
        background: green;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
</div>
</body>
</html>

浮动对浮动元素和普通元素的影响

在上面的例子中还需要注意两点：

如果浮动元素的上一个元素是标准流中的元素，也就是普通元素，那么浮动元素不会跑到和上一个元素所在的同一行，也就是说浮动元素的顶部总是和上一个元素的底部对齐。

当浮动元素的上面元素为普通元素时
块级元素设置了浮动之后，就会失去高度。

块级元素浮动后失去高度
取消浮动后

从上面的例子可以清楚的看到，当元素设置浮动之后，父容器并没有包裹住浮动元素，而取消浮动之后又被父容器包裹。这是为什么呢？就是因为块级元素设置浮动之后失去了高度，父容器无法检测到浮动元素的高度。这就是后面讲的为什么要清除浮动。
浮动元素虽然脱离了文档流，块级元素感知不到浮动元素的存在，但是它对文字会有影响，文字会环绕浮动元素布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>float</title>
    <style>
    .container{
        width: 400px;
        height: 300px;
        border: 5px solid;
    }
.box1{
        width: 100px;
        height: 100px;
        background: pink;
        float: right;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box1">1</div>
     <p>CSS的float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放。</p> 
    </div>
</body>
</html>

浮动元素对文字的影响

这里再列举几个浮动元素的特性：

元素具有了浮动属性，它就成为了一个块级元素。

浮动元素永远不会重叠。
后浮动元素不会超过先浮动元素的顶端，除非设置了负margin。
浮动元素不会超过容器的上padding，除非设置了负margin。
浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在浮动元素之下，而内容在浮动元素之上。

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

清除浮动
浮动虽然给我在许多地方带来了方便，它也带来了许多问题。但就如同上面提到的，如果父元素里的元素都设置浮动，那么父元素的高度无法被撑开，影响与父元素同级的元素。除此之外，也会影响页面的布局。所以就有了清除浮动。
需要注意的是：清除浮动是针对元素本身的，只能对自己有效果，不能够影响到别的元素。
举例说明一下：
1、2都设置右浮
根据上面的例子，1和2都是右浮，2紧随其后浮动。但是如果希望2在1的下面，我们不能够在1的样式中写clear: left，这样没有效果。如下图所示：
1清除左浮动
因为我们是想让2下去，不能够在1的样式里面清除浮动。它只能影响1，不能够影响到2.如果想要2下去，必须要在2样式里面清除浮动。
2清除右浮动
清除浮动
clear: none;
默认值。允许两边都可以有浮动对象。
clear: left
不允许左边有浮动对象。
clear: right
不允许右边有浮动对象。
clear: both
左右都不允许有浮动对象。

详细的清除浮动的方法可以参考我的另外一篇文章关于清除浮动的方法。

九、代码

1.写出如下两栏布局, 其中中间区块宽度900px, 居中,左侧边栏宽度200px, 右侧边栏宽度700px。

做完可参考范例
ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动。
ps: aside左浮动，main左浮动。
凡是有浮动的地方，其直接父元素必须清除浮动。

效果预览
2.不使用背景图片实现如下效果。

一开始写的代码是直接在伪元素上面使用相对定位，结果老师指出了不合理的地方。如下图。
批改
后面对代码进行了修改。
效果预览

代码github地址

浮动与定位

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

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

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

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

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

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

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

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

九、代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

HTML的自我修养

饥人谷技术博客

HTML