CSS总结四之浮动

一 浮动简介

为什么要使用浮动？

1. 如何让多个盒子(div)水平排列成一行？
2. 如何实现盒子的左右对齐？

1.1 浮动定义

元素的浮动是指设置了浮动属性的元素会

• 脱离标准普通流的控制
• 移动到指定位置。

float: left;

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

1.2 浮动的特点

（1）漂浮在普通流的上面， 脱离标准流， 俗称 “脱标”
（2）加了浮动的盒子是不占位置的，所以后面标准流的盒子会跑到浮动盒子的底下
（2）浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

1.3 浮动的扩展

1) 浮动元素与父盒子的关系

• 子盒子的浮动参照父盒子对齐
• 不会与父盒子的边框重叠，也不会超过父盒子的内边距

2) 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
  

二 清除浮动

为什么要清除浮动？
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

2.1 清除浮动的方法

2.1.1 额外标签法(隔墙法)

浮动元素末尾添加一个空的标签

 <div style=”clear:both”></div>，

2.1.2 父级添加overflow属性方法

可以给父级添加： overflow: hidden

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

2.1.3 after伪元素清除浮动（推荐）

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
/* ie6和7专门清除浮动的样式 */
.clearfix {
    *zoom: 1;
}

在父盒子class中添加clearfix

div class="box1 clearfix">
    <div class="subbox1"></div>
    <div class="subbox2"></div>
</div>

2.1.4 使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* ie6和7专门清除浮动的样式 */
.clearfix {
    *zoom: 1;
}

同样在父盒子class中添加clearfix