浮动 和 定位

浮动

浮动元素特征

元素脱离正常的文档流，其他非浮动元素感知不到它的存在。但是浮动元素可以感知已经存在于文本框中的浮动元素和非浮动块级元素。可以移动到所在容器的的左端或者右端。其他的文本和行内元素围绕它安放。

特征：不管一个元素是行内元素还是块级元素。
块级元素设置浮动之后，宽度就会收缩成本身内容的宽度，呈现和inline-block类似的感觉
行内元素设置浮动之后，呈现块级元素的特性，可以设置宽、高、margin
代码

影响

• 对父容器的影响： 不与父容器发生外边距合并。无法撑开父元素。

• 对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动，直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。

• 对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。

• 对文字的影响：文字所在行框因为浮动元素的挤压而缩短，实现了文字环绕浮动元素的效果。
  
  

浮动的使用场景

两栏布局

左侧固定宽度，右侧自适应
右侧固定宽度，左侧自适应

三栏布局

简单的三栏布局

注意 menu、aside、main 的顺序！

导航条

左浮导航条
右浮动导航条 DOM顺序不变

浮动的副作用

• 问题1：对后续元素位置产生影响

• 问题2： 父容器高度计算出现问题
  
  

解决方法：清除浮动

• 解决

• 解决

关于清除浮动

问题:box2设置clear:right有效吗?
因此我们得出了左右是根据自身来决定的

clear: left ;
如果前面有左浮动元素，就必须位于他的下方，
即被清除了浮动元素的top边，依靠浮动元素的bottom边

clear: right ;
如果前面有右浮动元素，就必须位于他的下方，
即被清除了浮动元素的top边，依靠浮动元素的bottom边

clear: both ;
清除左右浮动

清除浮动代码块

这段代码的含义是使用伪元素选择器在clearfix后面添加一个内容为空的元素，并且让他显示为block，然后起到专门用来清除浮动的作用。父元素看不见浮动的字元素，但却可以看到这个元素。

.clearfix::after {    content: '';    clear: both;    display: block;
}

取名为.clearfix::after，以后再需要使用清除浮动的地方的标签class后加一个clearfix类名，然后在<style>中引用这段代码即可

若以上jsbin代码链接失效，可以查看github上传的一个demo说明：
地址：https://evenyao.github.io/float-demo/

定位

参考 详解CSS的相对定位和绝对定位 做了相应的总结

相对定位和绝对定位

通常情况下，我们元素的position属性的值默认为static就是没有定位，元素出现在正常的文档流中，这个时候你给这个元素设置的left、right、bottom、top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明left:100px那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。
也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是我上述的这种情况，不过因为有了浮动，所以通常情况下我们不需要给元素设置position属性。
但是某些特殊的情况下，我们不得不用到position属性，下面详细分析position属性的relative和absolute值。

position: relative  相对定位

如果对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。


分析图示：

偏移前

上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。
接下来我给那个设置了position:relative的块设置一个偏移：left:50px ; top:30px这时再看看效果：

偏移后

这时发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。

同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。

通过设置它的z-index属性来调整它的堆叠顺序。

position: absolute 绝对定位

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除。

这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序 。

那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）

绝对定位的元素相对于谁来定位，就把这个"谁"叫着参照物，结合上面的讲解来看看下图就明白了 ：

HTML

我们看一下在浏览器里的效果，我们先看看没有使用绝对定位时的样子：

绝对定位前

然后我们给第二个块设置绝对定位：position: absolute 然后再设置一个偏移：left:150px; top:40px;这时就变成了下图所示：

绝对定位后

总结几种定位的方式

• 静态定位：默认布局方式，position: static;

• 相对定位：相对默认的布局位置进行定位，position: relative;

• 绝对定位：绝对定位元素脱离正常文档流，position: absolute;

• 固定定位：相对浏览器窗口进行定位，position: fixed;

• 粘性定位：默认情况下表现为相对定位，当浏览器窗口顶端的元素距离等于top属性的时候，转变为固定定位，positon: sticky;
  
  

对于相对定位于绝对定位的关系的理解

父元素使用相对定位position: relative;，子元素使用绝对定位position: absolute;。通过父元素的位置，定位子元素的位置，使用场景就像导航栏的主菜单和弹出二级菜单的效果关系一样。
Demo

z-index

z-index 有什么作用？
z-index设置元素堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序低的元素前面。

使用的方法：

img {    position: absolute;    left: 0px;    top: 0px;    z-index: 1;
}

作者：evenyao
链接：https://www.jianshu.com/p/40b486231b57