CSS快速入门-浮动(float)

一、float概述

浮动（float）是CSS布局常用的一个属性。它可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边框。

float被设计出来的初衷是用于文字环绕效果。如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

     #div1{

        width:100px;

        height:100px;

        border:2px solid red;

        float:left;

    }

    </style>

</head>

<body>

    <div id="div1">我是一个div，可以放图片。</div>

    <span>

        我是一大推文字我是一大推文字我是一大推文字我是一大推文字

        我是一大推文字我是一大推文字我是一大推文字我是一大推文字

        我是一大推文字我是一大推文字我是一大推文字我是一大推文字

        我是一大推文字我是一大推文字我是一大推文字我是一大推文字

        我是一大推文字我是一大推文字我是一大推文字我是一大推文字

        我是一大推文字我是一大推文字我是一大推文字我是一大推文字

        我是一大推文字我是一大推文字我是一大推文字我是一大推文字

    </span>

</body>

</html>

效果如下：

浮动会脱离文档流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就表现得如同浮动框不存在一样。

二、浮动初探

既然上面说到了元素浮动后会脱离文档流，那么就来看一下效果：

右图是浮动后的效果，设置div2浮动后，div3就会占用原来div2的位置。

三、float坍塌问题

这样一个场景：当div（father）里面包含其他几个div（child），且father没有设置高度，child没有浮动时，father的div是可以看到。但是，当child设置成float后，我们会发现father不见了，这就是坍塌问题。

右边是将child设置成float:left之后的效果。

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

		body{

			margin:0px;

		}

        #div1{

            width:100px;

            height:100px;

            border:2px solid red;

            float:left;

        }

        #father{

            background-color:green;

        }

    </style>

</head>

<body>

    <div id="father">

        <div id="div1"><span>块1</span> 暂无float:left</div>

        <div id="div1"><span>块2</span> 暂无float:left</div>

        <div id="div1"><span>块3</span> 暂无float:left</div>

    </div>

</body>

</html>

坍塌解决办法：

1、添加一个child元素，并设置clear:both;

 .clear{

            clear:both;

            }

 <div id="father">

        <div id="div1"><span>块1</span> float:left</div>

        <div id="div1"><span>块2</span> float:left</div>

        <div id="div1"><span>块3</span> float:left</div>

        <div class="clear"></div>

    </div>

原理：

　给空元素设置clear后，因为它的左右两边不能有任何浮动元素，所以空元素下移到浮动元素下方。而空元素又包含在父块中，相当于把父块撑开了，视觉上起到了父块包含浮动元素的效果。

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。不推荐使用。

2、给father设置CSS样式：overflow:hidden;

#father{

            background-color:green;

             overflow:hidden;

        }

原理：

　　给浮动元素的容器添加overflow:hidden;或overflow:aoto；可以使浮动元素回到容器层内，清除浮动。

3、给浮动元素的容器添加浮动

 #father{

            background-color:green;

             float:left;

        }

原理：

　　给浮动元素的容器（父元素）也添加上浮动属性即可清除浮动，但是这样会使下一个元素收到这个浮动元素的影响，影响整体布局，不推荐使用。

4、使用CSS的:after伪元素

.clearfix:after {

            content:"111";

            clear:both;

            display:block;

            visibility:hidden;

             height:0;

        }

:after伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清理浮动。

原理：

　　1、通过伪元素添加一个块元素

　　2、伪元素设置clear：both后，类似于解决方法1，空元素下移到浮动元素下方。

　　3、但是新增的内容被hidden了，且高度设置为0，所以111时看不到的。