网页的三种布局

自然布局

遵循元素自身的特性，在整个页面中，按照html的书写顺序，块级元素从上到下排列，行内元素从左到右排列，宽度达到最大值会自动折行。

浮动布局/流动布局

通过浮动float这个属性，改变元素的排列方式，可以让所有的元素在一行显示。

层布局

通过定位的属性，改变元素的位置，让元素层叠显示。

文档流

元素遵循自身的属性，根据html的书写顺序，块级元素从上到下排列，行内元素从做到右排列，宽度达到最大值会自动折行。

    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span</span>
    <i>i</i>

浮动的属性

    float:left; 
    /*左浮动*/
    float:right; 
    /*右浮动*/
    float:none; 
    /*设置为不浮动*/
    float:inherit; 
    /*默认继承父级元素的浮动方式*/

认识浮动

浮动这个属性诞生其实只是用来实现一个简单的文字环绕图片而已，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。

浮动的作用

会使元素向左或向右移动，其周围的元素也会重新排列。
浮动的元素可以左右移动，直到他的边缘碰到父级元素的边缘或另一个浮动元素的边缘

浮动的本质是什么？

浮动就是带有方向的display:inline-block（将元素转为行内块级元素）的属性

display:inline-block从某种意义上的作用就是让几个块级元素在一行显示
但是只要转为行内块级元素，浏览器就会读取代码之间的空格，在浏览器中解析为一段小的间距，那我们就要删除html代码之间的空格，很麻烦，但是浮动不会出现inline-block的问题，所以我们用浮动去代替inline-block。

浮动的应用

第一个作用：让几个盒子在一行显示

    <style>
        li{
            width: 100px;
            height: 100px;
            background: orange;
            margin:10px;
            float: left;
            font-size: 36px;
            /*float: left;
            从浮动的盒子中第一个盒子开始，从左边开始，从左到右依次显示
            float: right;
            从右边开始，从第一个盒子开始，从右到左依次显示
            */
        }
    </style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

第二个作用：让盒子靠右显示

    <style>
        div{
            width: 600px;
            height: 300px;
            background: blue;
        }
        div p{
            width:300px;
            height:50px;
            background: yellow;
            float: right;
        }
    </style>
    <div>
        <p>文字</p>
    </div>