浮动与定位float&position

浮动

功能：实现并排

使用规范

左浮动

float: left;

右浮动

float: right;

1）同级盒子要同时浮动
2）父盒子要有足够的宽度，否则子盒子会掉下去
3）顺序贴靠：子盒子按顺序贴靠；若无足够空间，则会寻找再前一个兄弟元素
4）浮动/定位后，行内元素转换成块级元素

BFC

Box Formatting Context块级格式化上下文
是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

现象：盒子不设置height，当内容子元素都浮动时，无法撑起自身
这个盒子没有形成BFC

创建BFC

方法1：float的值不是none
方法2：position的值不是static或者relative（常用）
方法3：display的值是inline-block、flex或者inline-flex
方法4：overflow:hidden；溢出盒子边框的内容被隐藏（常用）

作用

阻止margin塌陷

阻止浮动元素覆盖元素

无实战意义（因为要求都浮动）

 .s1 {
     float: left;
     width: 300px;
     height: 300px;
     background-color: red;
 }
 .s2 {
     overflow: hidden;
     width: 300px;
     height: 300px;
     background-color: blue;
}

清除浮动

添加浮动，子盒子脱离了文档流，导致父盒子高度折叠，无法展示

方法1：父盒子创建BFC

使用overflow:hidden方法
关住内部的浮动

p {
     float: left;
     width: 100px;
     height: 100px;
     background-color: orange;
     margin-right: 20px;
 }
div {
     overflow: hidden;
     margin-bottom: 10px;
 }
 <div>
     <p></p>
     <p></p>
 </div>
 <div>
     <p></p>
     <p></p>
 </div>

方法2：后面盒子的父盒子设置clear:both

clear清除浮动的影响
both左右浮动都清除

p {
     float: left;
     width: 100px;
     height: 100px;
     background-color: orange;
     margin-right: 20px;
 }
.box2 {
      clear:both;
 }
<div>
    <p></p>
    <p></p>
</div>
<div class='box2'> 
     <p></p>
     <p></p>
</div>

方法3：伪元素添加子盒子，该盒子设置clear:both

p {
   float: left;
   width: 100px;
   height: 100px;
   background-color: orange;
   margin-right: 20px;
}
.clearfix::after {
    content: '';
	clear: both;
    /* ::after:和:before是行内元素 */
	display: block;
}
<div class="clearfix">
    <p></p>
    <p></p>
</div>
<div class="clearfix">
    <p></p>
    <p></p>
</div>

方法4：两父盒子“隔墙”，墙盒子设置clear:both

 p {
     float: left;
     width: 100px;
     height: 100px;
     background-color: orange;
     margin-right: 20px;
 }
 /* 公共类 */
 .h20 {
     height: 20px;
 }
 .cl {
     clear: both;
 }
 <div>
     <p></p>
     <p></p>
 </div>
 <div class="cl h20"></div>
 <div>
     <p></p>
     <p></p>
 </div>

定位

相对定位

盒子相对原来的位置进行调整

position: relative;
top: 100px;
left: 100px;

位置描述词：
left向右移动；right向左移动；top向下移动；bottom向上移动
值可以为负数，即往规定方向相反移动

性质-老家留坑

本质仍在原位置，渲染在新位置
渲染的图形比喻成“影子”，不会对页面其他元素产生影响

用途

微调元素位置
相对定位的元素当做绝对定位的参考

nav ul li a {
    display: block;
    width: 120px;
    height: 40px;
    background-color: orange;
    color: white;
    text-decoration: none;
}
nav ul li a:hover {
    border-top: 3px solid red;
    /* 加上边框盒子掉下，相对定位进行微调 */
    position: relative;
    top: -3px;
}
<nav>
    <ul>
        <li><a href="">登录</a></li>
    </ul>
</nav>

绝对定位

在浏览器中以坐标精准描述位置

position: absolute;
top: 100px;
left: 100px;

性质-子绝父相

参考盒子（基准点）：
1）默认是浏览器
2）最近的拥有定位属性（一般是相对定位）的祖先盒子

用途

制作“压盖”、“遮罩”效果
盒子的垂直居中

position: absolute;
top: 50%;
margin-top: -自己高度一半;

固定定位

不管页面如何卷动，永远固定

position: fixed;
top: 100px;
left: 100px;

性质-基准点是页面

用途

“返回顶部"、“楼层导航"