浮动

主要内容

标准文档流
BFC规范和浏览器差异
清除浮动

标准文档流

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

标准文档流的特性

（1）空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。

（2）高矮不齐，底边对齐：

（3）自动换行，一行写不满，换行写

脱离标准文档流

css中一共有三种手段，使一个元素脱离标准文档流：

浮动
绝对定位
固定定位

浮动

浮动的最本质功能：用来实现并排

浮动的使用

浮动使用要点：要浮动，并排的盒子都要设置浮动
父盒子要有足够的宽度，否则子盒子会掉下去

浮动的性质

浮动的顺序贴靠特性：子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。
浮动的元素一定能设置宽高：浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是<span><a> 标签等。
浮动的元素有“字围”效果：标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）。
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

BFC规范和浏览器差异

BFC规范

BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到
外面的元素，反之亦然。

如何创建BFC

float的值不是none
position的值不是static或者relative
display的值inline-block、flex或者inline-flex
overflow:hidden

什么是overflow:hidden;

overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏
overflow:hidden;是非常好用的让盒子形成BFC的方法

BFC的其他作用

BFC可以取消盒子margin塌陷
BFC可以可以阻止元素被浮动元素覆盖,如下图：

浏览器差异

IE6，7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”。
如果要制作兼容到IE6，7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程，不要“玩杂技”。

清除浮动

为什么要清楚浮动?

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。
下面这个例子，有两个块级元素div，div没有任何属性，每个div里有p，如果我们给里面的p标签加浮动,效果如下：

上图中，我们发现：第二组中的第1个p，去贴靠第一组中的最后一个p了（我们本以为这些p会分成两排）。浮动的元素，只能被有高度的盒子关住。

清除浮动方法

清除浮动方法1：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            overflow: hidden;
            margin-bottom: 10px;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

清除浮动方法2：给后面的父盒子设置clear:both属性。clear：both表示清除浮动对自己的影响，表示左右浮动都清除。这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box2 {
            margin-top: 20px;
            clear: both;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>

清除浮动方法3：使用::after伪元素，并且给::after设置clear:both。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: '';
            clear: both;
            /* 转为块级元素 */
            display: block;
        }

        div {
            margin-bottom: 10px;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>

<body>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>
</body>

清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子。上面这个例子中，为了防止第二个div贴靠到第一个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

<style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }

        .cl{
            clear: both;
        }

        .h20 {
            height: 20px;
        }

        .h22 {
            height: 22px;
        }
    </style>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div class="cl h20"></div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

。

CSS3学习笔记(5)-浮动

浮动