传统流布局

标准流
浮动流
定位流

1. 标准流

也叫正常流，文档流。

包含两种元素，块元素和行内元素。块元素依次从上到下，行内元素从左到右依次排列。

块级元素

h1,p,ul,ol div, table,form,footer

排版方式：从上到下，每一个都独占一行,垂直排版。

对应的css, display:block;

行内元素

a,i (倾斜),b（加粗）,em(倾斜，强调语义),span（定义文档中的节）,mark(标记加背景色)code,

排版方式：从左到右，依次紧挨，放不下换行,水平排版。

对应的css, display:inline; display:inline-block;

2. 浮动流

脱离标准流的向左，或向右边浮动,直到碰到父元素或者另一个浮动元素。
跟行内元素布局类似，水平排版。
触发条件：float:left或者float:right 起初是为了实现文字环绕效果而设定。

注意点

1.元素遮挡问题

<!DOCTYPE html>
<html>
<head> 
    <style>  
    .outer {
        border: 1px solid black;
    }
    .box { 
        width: 200px; 
        height: 200px;  
        background-color: pink;
        font-size: 30px;
        margin: 50px;
    } 
    .div1 { 
         
    } 
    .div2 { 
         
    }
    </style>
</head>
<body> 
  <div class="outer">
    <div class="box div1">div1</div>
    <div class="box">div2</div>
    <div class="box">div3</div>
  </div>
</body>
</html>

当设置 float: left;

 .div1 { 
         float: left; 
    }

div1 脱离标准流，于是div2 正常流式布局，从上到下，div2左上对齐，浮动的div1会遮挡 div2 显示。

当设置 float: right;

 .div1 { 
         float: right; 
    }

div1 脱离标准流，于是div2 正常流式布局，从上到下，div2左上对齐，div1右对齐。

当div2 float:left ，div1当前行保留，div3上移动div2的位置，div2遮挡了div3

    .div2{
        float: left;
    }

2.父容器坍塌问题

由于脱离的标准流，对于父容器无法获取子元素高度。

<!DOCTYPE html>
<html>
<head> 
    <style>  
    .outer {
        border: 1px solid black;
    }
    .box { 
        width: 200px; 
        height: 200px;  
        background-color: pink;
        font-size: 30px;
        margin: 50px;
        float: left;
    }  
    </style>
</head>
<body> 
  <div class="outer">
    <div class="box">div1</div>
    <div class="box">div2</div>
    <div class="box">div3</div>
  </div>
</body>
</html>

解决方案

1. 父元素直接设置height高度

不能确定子元素的实际高度。

2. 父元素添加 overflow:hidden

    .outer {
        border: 1px solid black;
        overflow:hidden
    }

会自动清除里面box的float对页面的影响，但缺点如果内容超出限定的高度会被隐藏

如左绝对定位的右侧弹出菜单时，就会被父容器“切除”

3.子元素最后添加元素 clear:both

clear会消除设置浮动给他带来的影响，把left,right元素当作普通文档流处理，所以占用空间

  <div class="outer">
   <div class="box">div1</div>
   <div class="box">div2</div>
   <div class="box">div3</div>
   <div style="clear:both;"></div> 
 </div>

注意 不能直接加载float浮动元素上，因为float已经脱离了文档流，所以不能找到同一父级下的所有浮动元素

4. 父容器添加伪元素清除（常用）

相当于在父级容器里添加了隐藏的子元素<div style="clear:both;"></div>

.outer:after {
    display: block;
    content: " ";
    clear: both;
} 
<div class="outer">
    <div class="box">div1</div>
    <div class="box">div2</div>
    <div class="box">div3</div> 
</div>

最优的写法

.outer:after {
    display: table;
    height:0; /*部分浏览器需要指定table高度*/
    content: "";
    clear: both;
}

3. 定位流

效果有点像层叠的。
凡是设置定位，除了默认的static，都可以通过left、right、top、bottom进行定位

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .box1 {
            border: 5px solid black;
            /* position: relative; */
            /* left: 50px;
            top: 50px; */
            margin-bottom: 20px;
        } 
        .box2 {
            border: 5px solid red;
        }
        
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

1.静态定位static

浏览器默认定位方式 position:static，无特殊定位。
遵循保持标准流
占位。
不能使用left、right、top、bottom进行定位。

2.相对定位relative

保持标准流
占位
相对于当前自己做定位调整
设置left top等定位不影响原来的占地空间，box2不受影响
margin/padding跟static保持一致效果。

.box1 {
    border: 5px solid black;
    position: relative;
    left: 50px;
    top: 50px; 
}

设置left top等定位不影响原来的占地空间，box2不受影响

margin 依然生效，影响box2布局

3.绝对定位absolute

脱了标准流
不占位
以当前元素往上找父元素，是定位(relative,absolute,fixed)的节点为定位的参考标准。
当left、right、top、bottom都不设置，默认为auto，就会还原为reltaive
同时设置left right，left失效同理top bottom同时设置，top失效

.box1 {
    border: 5px solid black;
    position: absolute;  
    left: 30px;
    top: 30px; 
} 
.box2 { 
    border: 5px solid red; 
}

box1的定位和 margin-bottom 都不影响正常流box2的布局。由于box1脱离文档流，box2上移。

4.固定定位fixed

脱了标准流，以浏览器窗口节点为定位的参考标准。
不占位

5.粘性定位 - sticky

css 新特性，可以看做是相对定位和固定(绝对)定位的结合体。
当内容临界的位置如顶部或底部，就会固定。否则就保持相对布局的效果。

z-index

绝对比相对优先显示
相同的定位类型元素，写在后面的那个元素会层叠在写在前面的那个元素上
z-index 越大越在最上面。
可以是有负数
大小的比较必须在同一个级下比较

css 标准流/浮动流/定位流