CSS 浮动

目录

• 浮动特性
• 清除浮动

浮动可以理解为让某个行内元素脱离标准流，漂浮在标准流之上，和标准流不在一个层面上。float属性用于创建浮动框，将其移动至左边或右边，直到左边缘或右边缘触碰到包含块的另一个浮动框的边缘。

float:left|right|none;

浮动特性

1. 浮动元素会脱离标准流
   浮动的元素脱离了标准流的控制移动到指定位置，也就是所谓的脱标，浮动的盒子不会保留原来的位置，其他在标准流中的盒子就会占有浮动盒子的原来的位置，可以理解为浮动的盒子与标准流中的盒子不在同一平面上，因此浮动的盒子可能会覆盖标准流的盒子。
2. 浮动元素会具有行内块元素的特性
   任何元素都可以浮动，不管是什么类型的元素，添加浮动后就会有行内块元素的特性。例如如果对行内元素指定了浮动，则不需要显示转化为行内块元素就可以直接指定高度和宽度。
3. 浮动元素会在一行内显示并且元素顶部对齐
   如果对多个兄弟元素指定了浮动，则它们会按照属性值一行内显示并顶端对齐。比如第一行有4个浮动元素,高度分别为10px,20px,40px,30px,则第二行元素都要对齐40px的元素，即所谓的一行内元素会顶端对齐，若宽度不够，则后面的盒子会被挤到下一行对齐。

清除浮动

浮动元素有一个标准流的父亲，但是有的时候由于要浮动的元素个数不确定导致最终高度不确定，无法为父亲指定高度，由于浮动的盒子不会占有原来的位置，因此父盒子的高度可能为0，又父盒子为标准流，故可能影响其他标准流，要清除浮动带来的影响。清除浮动后，父盒子会根据浮动的元素自动检测高度父盒子有了高度就不会影响下面的标准流了。

1. 额外标签法
   在最后一个子级盒子后添加一个空标签，设置标签的样式为clear:both,这个方法优点是书写方便通俗易懂，缺点是每个父盒子中都有无用的空标签堆积,结构性差。

...
.clear{
    clear:both;
}

...

<div>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="clear"></div>
</div>

2. 父级添加overflow属性
   为父级添加overflow属性，将其属性值设置为auto、hidden或scroll。优点是代码简介，缺点是无法显示溢出的部分。

...
.fa-box{
   overflow:auto;
}

...

<div class="fa-box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="clear"></div>
</div>

3. 父级添加after伪元素
   clearfix是基于父元素上使用:after"伪类，使用伪类在浮动元素的父容器后面创建隐藏元素。优点是没有增加额外的标签，结构更简单，缺点是需要照顾低版本浏览器。

...
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    /*IE6、7专有*/
    *zoom:1;
}

...

<div class="fa-box clearfix">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="box">3</div>
       <div class="clear"></div>
</div>

4. 父级添加双伪元素
   与第3种方法差不多，只是在前面也创建元素更好理解。

...
.clearfix:after，
.clearfix:before{
    content:"";
    display:table;
}
.clearfix:after{
  clear:both;
}
.clearfix{
   *zoom:1;
}
...

<div class="fa-box clearfix">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="box">3</div>
       <div class="clear"></div>
</div>