HTML布局

标准流：

        标准流就是元素在页面中的默认排列方式，也就是元素在页面中的默认位置。
        1.1 块元素----独占一行----从上到下排列
        1.2 行内元素----不独占一行----从左到右排列，遇到边界换行
        1.3 行内块元素----不独占一行----从左到右排列，遇到边界换行
2.浮动:float

       1.属性：
            left---向左浮动
            right---向右浮动
        2.浮动的特点：
        2.1 脱标---脱离标准流,释放当前盒子的默认位置---影响父盒子的高度
        2.2 浮动的方向---水平方向（左，右，没有中间）
        2.3 本质将元素转换为行内块元素---横向排列，并且可以设置宽高
标签代码:
    <div class="left">左</div>
    <div class="right">右</div>
样式代码:
    <style>
      div {
        height: 200px;
        width: 300px;
      }
      .left {
        background-color: aqua;
        /* 浮动到左 */
        float: left;
      }
      .right {
        background-color: burlywood;
        /* 浮动到左 */
        float: left;
        /* 浮动到右 */
        /* float: right; */
      }
    </style>
效果:

小案例:
标签代码:
    <ul>
      <li><a href="">首页</a></li>
      <li><a href="">菜鸟工具</a></li>
      <li><a href="">菜鸟笔记</a></li>
      <li><a href="">参考手册</a></li>
      <li><a href="">用户笔记</a></li>
      <li><a href="">测验/考试</a></li>
      <li><a href="">本地书签</a></li>
    </ul>
样式代码:
    <style>
      ul {
        height: 50px;
        line-height: 50px;
        list-style: none;
        background-color: rgb(84, 145, 84);
      }
      ul li {
        float: left;
        padding: 0 15px;
      }
      ul li a {
        text-decoration: none;
        color: rgb(255, 255, 255);
      }
    </style>
效果:

3.浮动清除:

        方法一(额外标签法):在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
        方法二(双伪元素法[推荐]):
        /* before 解决外边距塌陷问题 */
        /* 双伪元素法 */
        .clearfix::before,
        .clearfix::after {
        /* 插入的内容 */
        content: "";
        display: table;
        }
        /* after 清除浮动 */
        .clearfix::after {
        clear: both;
        }
        方法三(单伪元素法):
        方法四(overflow [推荐]):父元素添加 CSS 属性 overflow: hidden
        方法五:给父盒子设置高度[不推荐]
1.浮动后的影响：
         1.1.父盒子的高度塌陷，背景颜色不会被子盒子撑开
         1.2.父盒子下边的其他元素会上移
2.浮动的清除：
         方法一：额外标签法---在浮动的盒子后面添加一个空的标签，设置clear:both---不推荐使用
         方法二：给父盒子添加固定高度---不推荐使用---动态数据列表不适用
         方法三：单伪元素法---给父盒子添加:after伪元素，设置clear:both---推荐使用
         方法四：双伪元素法---给父盒子添加:before和:after伪元素，设置clear:both---推荐使用---即             可以清除浮动干扰，同时又能解决父盒子高度塌陷的问题