1.1传统网页布局的三种方式

1、普通流（标准流）（多个块级元素纵向排列）
2、浮动（多个块级元素横向排列）
3、定位

1.2标准流（普通流/文档流）

所谓的标准流就是标签按照规定好默认方式排列

1、块级元素会独占一行，从上向下顺序排列

• 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2、行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

• 常用元素：span、a、i、em等

以上都是标准流布局，标准流就是最基本的布局方式

注意：实际开发中，一个页面基本都包含了这三种布局方式。

1.3浮动

1.3.1为什么需要浮动？

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1.3.2什么是浮动？

float属性用于创建浮动框，将其移动到一边，知道左边缘或者右边缘触及包含块或另一个浮动框的边缘。float
选择器{ float:属性值；}

1.3.3浮动的特性

1、浮动元素会脱离标准流（脱标）（浮动之后不会再保留原来的位置）
2、浮动的元素会一行内显示并且元素顶部对齐
3、浮动的元素会具有行内块元素的特征（不管什么元素，添加浮动之后具有行内块元素相似的特性）（如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定）

1.3.4浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：

• 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置 符合网页布局第一准则

1.3.5小米布局案例(布局）

image.png

*{
            padding: 0;
            margin:0;
         }
         .box{
             width: 1380px;
             height:520px;
             margin:0 auto;
             padding-top:10px;
             background-color: pink;
         }
         .left{
             width: 260px;
             height:520px;
             float:left;
             background-color: red;
         }
         .right{
             width:1120px;
             height:520px;
             float:left;
             background-color:blue;
         }

 <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

1.3.6小米布局案例2(布局）

image.png

   *{
            padding: 0;
            margin: 0;
        }
        /* 消除li前面的圆点 */
        li{
            list-style: none;
        }
        .box{
            width:1226px;
            height:285px;
            background-color: pink;
            margin:0 auto;
        }
        .box li{
            width:296px;
            height:285px;
            background-color:red;
            float:left;
            margin-right:14px;
        }
       .box .last{
            margin-right:0;
        }

 <ul class="box">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li class="last">4</li>
   </ul>

1.3.7小米布局案例3(布局）

image.png

 .box{
            width:1226px;
            height: 615px;
            background-color: pink;
            margin:0 auto;
        }
        .left{
            float:left;
            width: 234px;
            height: 615px;
            background-color:purple;
        }
        .right{
            float:left;
            width: 992px;
            height: 615px;
            background-color:skyblue;
        }
 .right>div{
            float:left;
            width:234px;
            height: 300px;
            background-color: #fff;
            margin-left: 14px;
            margin-bottom: 14px;
        }

<div class="box">
        <div class="lft"></div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>