CSS浮动与定位

浮动

• 浮动的最本质功能： 用来实现并排
• 浮动的使用要点： 要浮动，并排的盒子都要设置浮动
• 父盒子要有足够的宽度 ，否则盒子会掉下去
• 子盒子会按顺序进行贴靠，如果没有足够空间则会寻找再前一个兄弟元素

• 浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使他是span或者a标签等
• 垂直显示的盒子，不要设置浮动， 只有并排显示的盒子才要设置浮动

BFC规范和浏览器差异

• BFC(块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• 一个盒子不设置height，当内容子元素浮动时， 无法撑起自身，这个盒子没有形成BFC

创建BFC的四个方法

• 方法一、float的值不是none
• 方法二、position的值不是static或者relative
• 方法三、display的值是inline-block、flex或者inline-flex
• 方法四、overflow：hidden

什么是overflow：hidden

• overflow：hidden表示溢出隐藏，溢出盒子边框的内容将会被隐藏，但是border区域不会隐藏。
• overflow：hidden是非常好用的让盒子形成bfc的方法

bfc的其他作用

• bfc可以取消盒子margin塌陷
• bfc可以阻止元素被浮动元素覆盖

清除浮动

• 浮动一定要封闭在一个盒子中，否则就会对页面后续元素产生影响。
• 清除浮动方法1：让内部浮动的父盒子形成bfc，它就能关闭住内部的浮动，方法overflow：hidden 赋给父盒子

 <div>  <!--overflow:hidden-->
        <p></p>
        <p></p>
    </div>

    <div>  <!--overflow:hidden-->
        <p></p>
        <p></p>
    </div>

• 方法2：给后面的父盒子设置clear：both属性，clear表示清除浮动对自己的影响，both表示左右浮动都清除
• 方法3：使用：：after伪元素给盒子添加最后一个子元素并且给：：after设置clear：both

• 方法4：在两个父盒子之间“隔墙”，隔一个携带clear：both的盒子

相对定位

• 相对定位：盒子可以 相对自己原来的位置 进行位置调整，称为相对定位

• 位置描述词：left right top bottom 值可以是负数
• 相对定位会在 老家留坑，本质上仍是在原来的位置
• 相对定位的用途：用来微调位置， 可以用来当作绝对定位的参考盒子

绝对定位

• 盒子可以在浏览器中 以坐标进行位置精准描述 拥有自己的绝对位置
• 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行 压盖
• 脱离标准文档流的方法：浮动、绝对定位、固定定位
• 绝对定位的盒子垂直居中

• z-index堆叠顺序，是一个没有单位的正整数，数值大的能够压住数值小的
• 绝对定位的用途：1、用来制作“压盖”、“遮罩”效果 2、结合css精灵使用 3、结合js实现动画

固定定位

• 不管页面如何卷动，它永远固定在那里
• 固定定位智能以页面为参考点，脱离标准文档流
• 固定定位的用途：“返回顶部”“楼层导航”