浮动式CSS里面的重中之重

浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动

浮动属性

u Float，浮动属性名，如：float: left; 向左浮动

n Left ，向左浮动

n Right，向右浮动

说明：

1. 浮动元素浮动，后面元素会受到影响，跑到它下面

2. 给元素全部浮动会并排显示（注：父元素宽度不够会另起一行）

u clear，清除浮动，如：clear: both;

n Left ，清除左浮动

n Right，清除右浮动

n Both; 清除所有浮动（推荐用）

说明：

1、元素需要向左浮动，就给该元素添加float属性，float：left;

2、元素需要向右浮动，就给该元素添加float属性，float：right;

3、浮动元素不会影响前面的元素，它会影响后面的元素

4、后面元素受到影响，我们需要说明：清除浮动，那么就给该元素添加属性，clear:both;

把你的块儿元素颜色放在同一行：

    <style>
        /*浮动起来让你的颜色都在同一样*/
        .box1{
            width:100px;
            height:100px;
            background-color: darkgreen;
            float:left;
        }
        .box2{
            width:100px;
            height:100px;
            background:blue;
            float:left;
        }
        .box3{
            width:100px;
            height:100px;
            background-color: red;
            float:left;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>

效果：

我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。

其实就是后面的浮动就会和第一个一起显示了，然后浮动的后面的就会顶替它的位置，然后第三个就跑到了第二个的位置就会被覆盖住不显示了

那么浮动如果大家想学好，一定要知道它的四大特性

1.浮动的元素脱标（脱离标准流）

2.浮动的元素互相贴靠

3.浮动的元素由"子围"效果

4.收缩的效果

浮动元素脱标

脱标：就是脱离了标准文档流

看例子

    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: red;
            float:left;
        }
        .box2{
            width:400px;
            height:400px;
            background:yellow;
            /*float:left;*/
        }
        span{
            width:300px;
            height:50px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span></span>
</body>

效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。

原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

也就是一个行内标签你要式想进行设置宽高那么你就需要进行浮动脱离了标准流然后就可以设置宽高了

浮动元素互相贴靠

看例子

    <style>
        .box1{
            width:100px;
            height:400px;
            background-color: red;
            float:left;
        }
        .box2{
            width:150px;
            height:450px;
            background:yellow;
            float:left;
        }
        span{
            width:300px;
            height:300px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span></span>
</body>

效果：

效果发现：

如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

浮动元素字围效果

    <title>Document</title>
    <style>
        *{
            /*为了顶格显示*/
            margin: 0;
            padding:0;
        }
        div{
            float:left;
        }
    </style>
</head>
<body>
<div>
    <img src="../泷泽萝拉.jpg" alt="">
</div>

<p>
    奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸强奸
</p>

</body>

效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

这就是字体把图片给包围住了的效果

浮动元素紧凑效果

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

    <title>Document</title>
    <style>
        div{
            float:left;
            background:red;
        }
    </style>
</head>
<body>
<div>
    老王
</div>
</body>

效果：

大家看最后的显示就是这样就是浮动的就是字体的大小

大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，

为什么要清除浮动

在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）

大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。

看一个效果：

CSS的浮动

浮动