image.png
    image.png

    1标准流
    image.png

    image.png

    2需要浮动的情况
    image.png

    3浮动语法
    image.png

    4浮动的特性（重难点！！！！！！！）

    image.png
    特性1：脱标

    image.png

    image.png
    你飞走了，别的盒子就会顶上！！！

    image.png

    代码实际上：朝我们面前飞来
    image.png没有加浮动
    image.png加了浮动

    特性2：一行显示，顶端对齐image.png

    特性3：有行内块元素的特性

    image.png
    不管是行元素还是块元素！！！！！！

    image.png

    5布局第一准则（纵向用父盒子标准布局，横向用子盒子浮动布局）
    image.png

    6常用网页布局
    image.png
    最常用：

    image.png

    7需要注意的地方
    image.png