前端——浮动+定位样式

一、浮动float------浮动是会使盒子脱离文档流

添加了浮动的元素

1.原本的位置不占用脱离文档流

2.设置了浮动就不支持auto自适应居中

3.文字会感受到浮动跟着进行文字环绕效果而不是浮动元素覆盖文字文字和浮动处于同一层的关系

4.可以使行内元素支持高宽设置也支持上下外边距

5.可以按照自己设置方向来进行移动

写法: 选择器{

float:属性值;

}

1.默认值: 没有浮动 none

2.left 元素向左浮动

3.right 元素向右浮动

/* 元素向左浮动 */

/* float: left; */

/* 元素向右浮动 */

float: right;

清楚浮动样式：

常用于解决父级高度塌陷问题:父级盒子不设置高度，默认是由里面的子级撑开，但是子级设置了浮动元素，浏览器在计算高度时不会把添加了浮动元素的子元素算进去。

示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 1000px;
            /* height: 500px; */

            /* overflow: hidden; */
            background-color: skyblue;
        }

        .box1{
            float: right;
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .box2{
            float: left;
            width: 350px;
            height: 400px;
            background-color: pink;
        }

        .box3{
            float: left;
            /* float: right; */
            width: 350px;
            height: 450px;
            background-color: red;
        }

        .footer{
            width: 1000px;
            height: 500px;
            background-color: purple;
        }

        .clear{
            /* 清除浮动样式 */
            /* clear: left; 清除左浮动 */
            /* clear: right;  */

            /* 同时清除左右浮动 */
            /* clear: both; */
        }

        /* 用伪元素清除 wrap盒子的浮动 */
        .wrap::after{
            /* 开启伪元素  key */
            content: '';
            /* 伪元素是行内元素   变成块级元素  */
             display: block;
            /* 同时清除左右浮动 */
            clear: both;
        }
    </style>
</head>
<body>
      <div class="wrap">
           <div class="box1">左侧盒子</div>
           <div class="box2">中间盒子</div>
           <div class="box3">右侧盒子</div>

           <!-- 清除浮动样式 -->
           <div class="clear">

           </div>
      </div>

      <div class="footer">
         俺是底部内容盒子 
      </div>
</body>
</html>

实现效果：

二、定位样式------position

相对定位 position: relative;

a.不会脱离文档流以自身左上角的位置来进行移动原本的位置会继续保留

b.需要通过方位值来移动

c.不会影响元素自身给块级元素设置相对定位是支持auto自适应居中

/* 相对定位 */

position: relative;

绝对定位

a.脱离文档流原地起飞

b.参考位置以最近一个父级定位属性来移动 (如果说找不到最近的一个定位父级那就找body 祖先元素 )

c.绝对定位一般配合相对定位来使用来达到一个子绝父相 (父相子绝)的效果子级是绝对定位父级是相对定位子级去参考父级的相对定位来移动

d.可以让行内元素支持高宽元素高宽默认不写为0 暂时不支持 auto自适应居中 (单独写不生效)

/* 绝对定位 */

position: absolute;

固定定位 position: fixed;

a.脱离文档流参考位置是以浏览器窗口为准来进行移动

b.使用方位值来移动生效

c.margin:auto 失效

/* 固定定位 */

position: fixed;

粘性定位 position: sticky;

/* 粘性定位 */

position: sticky;

快速让子级盒子在父级盒子里面水平居中效果:

/* 第一种方法 */

/* position: absolute;

left: 0px;

right: 0px;

top: 0px;

bottom: 0px;

margin: auto; */

/* 第二种 */

/* position: absolute;

left: 50%;

top: 50%; */

/* 负自身宽度的一半 */

/* margin-left: -100px; */

/* 负自身高度的一半 */

/* margin-top: -100px; */

/* 这个写法相对于第二种简写优化写法 */

position: absolute;

left: calc(50% - 100px);

top: calc(50% - 100px);

5.定位层级 z-index 解决同级定位元素的覆盖问题数字越大越优先显示

取值数字越大越优先默认值是 0/auto auto: 指的是你没写值
z-index 层数只允许写了定位属性元素使用

注意点: 方位值(left top right bottom ) 和定位层级(z-index) 要配合定位属性使用