本篇简单记录一下css浮动这个属性学习的心得

网页布局

本质：就是，用css 来摆盒子

三种布局方式

标准流：就是前面所学的块级元素，行内元素和行内块元素。
浮动
定位

为什么要浮动

在标准流布局方式里面，我们的div这样的块级元素是不可以共处于一行的，要使他在一行显示，我们可以把它转成行内块元素也就是

display:inline-block,虽然这样可以，但是这样依旧不如浮动更加灵活，浮动的精髓就是浮** 和动。

div之类块级元素不可以共处一行

    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .one {
            background-color: antiquewhite;
        }

        .two {
            background-color: pink;
        }
    </style>

    <div class="one">div1</div>
    <div class="two">div2</div>

我先准备了如上代码，设置了简答设置了盒子的高度和宽度以及背景颜色

由于div是块级元素，所以他们无法在一行显示

转换成行内元素

给div再上如下样式

display: inline-block;

这样会有但是还有有间隙，我们还得设置。

浮动

我们为了达到我们所需要的结果这样加入

float: left;

什么是浮动

总结：

一切元素都有float属性，float属性用于创建浮动框，将其移动到一边，浮动到浏览器 父框或者 另一个浮动框的左(右)边缘，上边缘浮动到他们可以达到的最大边缘。

float:值;

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

例如

    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .right {
            background-color: pink;
            float: right;
        }

        .left {
            background-color: aqua;
            float: left;
        }
    </style>

    <div class="right">
        右
    </div>
    <div class="left">
        左
    </div>

这个就是浮动到浏览器的边缘。

浮动特性

浮动元素脱离了标准控制流的规则，脱标。
浮动元素是按照每个块级元素的顶部开始对齐的。
浮动元素具有行内块元素。

脱标

不是按照浮动元素的控制
浮动元素不占用标准元素的位置。就好像浮在标准元素之上一样。

    <style>
        .b {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .f {
            width: 100px;
            height: 100px;
            float: left;
            background-color: pink;
        }
    </style>
    <div class="f">我是浮动盒子</div>
    <div class="b">我是标准盒子</div>

强调:我们如果改变了 f 和 b 的顺序 f 的上边缘只会浮动到第一个盒子的下边缘。

虽然不占用盒子的位置，这里的文字显然也被挤过去了。

多个盒子浮动

        div {
            width: 300px;
            height: 100px;
            background-color: plum;
            border: 1px solid black;
            float: left;
        }

    </style>
    <div style="height: 200px;">1</div>
    <div>2</div>
    <div style="height: 300px;">3</div>
    <div>4</div>

这里的盒子有些的高度不同，但是他们是（按照上一行的底部的标准）顶部水平对齐的。