前端基础总结（3）——css定位和浮动

CSS 定位

position属性用来指定一个元素在网页上的位置，一共以下有5种定位方式：

（1）static——静态定位

static是position的默认值，即没有定位，元素正常出现在页面流中。

（2）fixed——固定定位

元素相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

（3）relative——相对定位

元素的定位是相对其正常位置（即static时的位置），搭配top、bottom、left、right使用来指定偏移的方向和距离。

div {
  position: relative;        //div元素从默认位置向下偏移20px
  top: 20px;
}

（4）absolute——绝对定位

元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素或者祖先元素，那么它的位置相对于根元素html。

元素搭配top、bottom、left、right使用来指定偏移的方向和距离

#father {                         //父元素是relative定位，子元素是absolute定位
  positon: relative;
}
#son {                           //上方的距离为20px,因此子元素相对父元素向下偏移20px
  position: absolute;         
  top: 20px;
}

元素的位置与文档流无关，因此不占据空间，所以它们可以覆盖页面上的其它元素。

如果两个定位元素重叠，我们要指定没有指定哪个元素应该放在前面可以使用z-index属性

#father {
  positon: relative;
  z-index:1; 
}
#son{ 
  position:absolute;         //偏移为0时父元素与子元素重叠
  left:0px; 
  top:0px; 
  z-index:2;                 //z-index值较大的元素在上面，因此子元素覆盖在父元素上
}

具有更大z-index值的元素总是在前面，如果都没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

（5）sticky——动态固定

它会产生动态效果，很像relative和fixed的结合。

#toolbar {
  position: sticky; 
  top: 20px;
}

比如网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）

页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）

等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略

#toolbar {
  position: -webkit-sticky; /* safari 浏览器 */
  top: 20px;
}

除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky，Safari 浏览器需要加上浏览器前缀 -webkit-

---

CSS浮动

CSS 的 Float（浮动），会使元素脱离文档流，向左或向右移动，碰到父级边界或者另外一个浮动元素停止。

ps:只能左右移动而不能上下移动

（1）块级元素独占一行，我们通常使用float来让多个块级元素同一行上显示。

#box1{
  width:200px;
  height:100px;
  background-color:red;
  float:left;          // 左浮动
}
#box2{
  width:200px;
  height:50px;
  background-color:blue;
  float:left;         // 左浮动
}

效果：

（2）浮动元素是脱离文档流的，即不占空间

#box1{
  width:50px;
  height:50px;
  background-color:red;
  float:left;         
}
#box2{                //box1设置float:left向左浮动并脱离文档流，box2正常排列，因此出现重叠现象
  width:200px;
  height:150px;
  background-color:blue;
}

效果：

（3）标准流中的文字不会被浮动的盒子遮挡住，文字就像水一样围着字

img{
  float:right;
}




<img src="./a.jpg">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

效果：

---

清除浮动（重要）

        由于浮动的元素脱离正常的文档流，因此当子元素设置浮动的时候，父元素在显示时不考虑子元素的位置，这就造成了显示出来父容器好像空容器一样。

清除浮动的本质：主要为了解决父级元素因为子级浮动引起内部高度为0 的问题，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

方法一：在浮动元素下方添加一个空元素​​​​​​​（不推荐）

<div>

    <div style="width:200px;height:50px;float:left;"></div>
    
    <div style="width:100px;height:70px;float:right;"></div>

    <div style="clear:both;"></div>

</div>

clear 属性指定元素两侧不能出现浮动元素，可以取值left、right、both

缺点：添加了无意义标签，语义化差

方法二：父元素添加overflow属性（不推荐）

 .fahter{
        width: 400px;
        height:300px;
        overflow: hidden;      //父元素设置overflow触发BFC方式，实现清除浮动
 } 

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

方法三：父元素使用after伪元素（推荐使用）

.father:after{        
        content: "";              //content可以取值也可以为空
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;      //允许浏览器渲染它，但是不显示出来
} 

         实现原理类似于clear:both方法，只是区别在于clear属性是插入一个无语义化的空标签，而使用after伪类是在元素内部增加一个类似于div.clear的效果。