浮动

基本概念

浮动属性为float，最初引入是为了实现文字环绕图片的简单布局，类似Word中的环绕布局，后来float不仅被用于浮动图片，也被用于浮动其他任何元素，从而可以使用float创建整个网站的布局。

float属性可以是元素向左或向右浮动，具体使用说明如下：

取值：left | right | none | inherit
初始值： none
应用于： 所有元素
继承性： 无
计算值： 根据指定确定

使用方法：

<div style="float:left"></div>

浮动属性特点

感受下元素的浮动；

浮动带来的副作用

浮动会让元素脱离文档流，不再影响不浮动的元素，实则不然。浮动不再占据文档流（什么是文档流？）的位置，也使浮动元素周围的元素表现的如同浮动元素不存在一样，给布局带来了一些副作用。

• 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖；

.container{
    width:250px;
    position: relative;
    border: solid #363636 4px;
    margin: 30px 30px 30px 0;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.box1{
    /*float: left;*/
    border: solid #363636 4px;
    background-color:#FFD700;
    width: 70px;
    height: 70px;
}

.box2{
    border: solid #363636 4px;
    background-color:#66CD00;
    width: 140px;
    height: 140px;
}

<div class= "container fl">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="container fl">
    <div class="box1 fl"></div>
    <div class="box2 "></div>
</div>

• 行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间；

.container p{
    color:#333;
    font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
}

<div class= "container fl">
    <div class="box1"></div>
    <p >码蜂社前端学习社区，生命不息，折腾不止。码蜂社前端学习社区，生命不息，折腾不止。码蜂社前端学习社区，生命不息，折腾不止。
    </p>
</div>
<div class="container fl">
    <div class="box1 fl"></div>
    <p >码蜂社前端学习社区，生命不息，折腾不止。码蜂社前端学习社区，生命不息，折腾不止。码蜂社前端学习社区，生命不息，折腾不止。
    </p>
</div>

• 浮动元素的父元素坍缩；

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="container">
    <div class="box1 fl"></div>
    <div class="box2 fr"></div>
</div>

如果我们能够为浮动元素留出垂直空间，则这些副作用都会消失，这就是清除浮动。

如何清除浮动

浮动元素脱离了文档流，不影响周围的元素，因此清除浮动实际上是为前面的浮动元素留出足够的垂直空间。

clear属性

clear属性的值可以是left、right、both或者none,含义是表示框的哪些边不应该挨着浮动框。clear元素应该作用在谁身上？

1.作用在浮动元素后禁止浮动的第一个元素上。

<div class="container fl">
    <div class="box1 fl"></div>
    <div class="box2 " style="clear: both"></div>
</div>

2.如果浮动元素之后没有元素,则添加一个空元素，并对空元素清除浮动。

添加空元素常用的有两种方式，一种是直接添加，另一种是通过伪类添加。

• 直接添加

<div class="container">
    <div class="box1 fl"></div>
    <div class="box2 fr"></div>
    <div style="clear:both"></div>
</div>

效果

• 通过伪类添加

.clearfix:after{
    content:" ";
    display:block;
    height:0;
    visibility:hidden;
    clear:left;
}

.clearfix:after{
    content:" ";
    display:table;
    clear:both;
}

<div class="container clearfix">
    <div class="box1 fl"></div>
    <div class="box2 fr"></div>
</div>

BFC 清理浮动

补充知识：BFC(Block Formatting Contexts)

BFC(Block Formatting Contexts)直译为"块级格式化上下文"，是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC 有三个特性：

1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠。
2. BFC不会重叠浮动元素。
3. BFC可以包含浮动。

注：利用第一条特性可以防止外边距合并，利用第三条特性可以达到“清除浮动”的目的。

触发BFC的方式：

1. float 为 left|right
2. overflow 为 hidden|auto|scroll 此方法最为常用
3. display 为 table-cell|table-caption|inline-block
4. position 为 absolute|fixed

利用第三条特征，只要浮动元素的父容器形成BFC，浮动元素就会被包含在父元素内，从而解决父元素塌陷的效果，后续元素也不会受到浮动元素的影响，从而达到清除浮动的效果。

BFC清除浮动有什么副作用？

1. float为 left|right

   将父元素设置成浮动，从而清除子元素的浮动。副作用是父元素变成浮动元素了，难道要整个布局都浮动？虽然有助于减少或消除不必要的标记，但浮动会变得很复杂，一些老式浏览器在处理有许多浮动元素的布局时有困难。

2. overflow为 hidden|auto|scroll

   在某些情况下会产生滚动条或截断内容的现象。

3. display为 table-cell|table-caption|inline-block

   无法兼容低版本IE。

4. position为 absolute|fixed

   改变了元素的定位方法，如果定位方式不是我们需要的，则会很麻烦。