CSS之浮动

布局的几种方式

即用CSS来摆放盒子，CSS有三种方式

1. 普通流（标准流）
2. 浮动
3. 固定

标准流

标准流中元素分行级元素和块级元素，即基本的布局方式，下面仅仅介绍浮动和固定两种方式

浮动

浮动元素会触及到另一个浮动元素的边框或到包容盒子边框为止

语法float:left|right

典型应用：可以让多个元素一行排列在一行显示。纵向排列用标准流，横向排列用浮动流

特点：

1. 浮动元素脱离标准流，不再保留原先的位置。
2. 对齐方式为上边界对齐。若盒子所想导致装不齐，则另起一行。
3. 浮动元素具有行内块元素的特性，块级元素设置浮动属性后，宽度大小根据内容而定

注意点：

1. 浮动元素和标准流搭配使用
2. 一个元素浮动了，同一个盒子内的其他浮动元素也会跟着浮动。浮动元素不会对前面已经设置标准流的元素产生影响。讲解

清除浮动

因为不知道容器的内容多少，不应该给父盒子高度，应该让子孩子让撑开父节点。但父元素只能被标准流的元素撑开，如果所有的孩子都设置了浮动，而父元素的高度就会变成0，这样就会影响下面标准流元素的布局。讲解

本质：清楚浮动之后，父节点就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

//语法
clear:left|right|both

解决方法：

1. 额外标签法（隔墙法）：W3C推荐标准
   具体做法：在浮动元素的最后一个标签添加一个空标签

.clear {
    clear: both;
}

 <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>

2. 给父级添加overflow。缺点：无法显示溢出的部分

.box {
    /* 清除浮动 */
    overflow: hidden;
}

3. :after伪元素法(相当于额外标签法的升级版，CSS自动在添加了一个空标签)

<div class="box clearfix">
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</div>

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

.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}

4. 双伪元素清除浮动(相当于在前后各加了一个标签)

<div class="box clearfix">
   <div class="damao">大毛</div>
   <div class="ermao">二毛</div>
</div>

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

总结