css盒子浮动简单介绍

浮动

1.1 css 布局的三种机制

1.普通流（标准流）

块级元素会独占—行，从上向下顺序排列;
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行;
常用元素: span、a、i、em等

1.2 浮动

1.2.1 什么是浮动（float）

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

1. 脱离标准普通流的控制
2. 移动到指定位置

作用

1. 让多个盒子（div）水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等。
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

语法

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

浮动小结

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意:浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白 缝隙

2. 清除浮动

2.1 清除浮动的方法

1）额外标签法(隔墙法)

是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>，
或则其他标签br等亦可。

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差。

2）父级添加overflow属性方法

可以给父级添加:overflow为hidden| auto | scrol1都可以实现。

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

3）使用after伪元素清除浮动

:after方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

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

• 优点:符合闭合浮动思想结构语义化正确
• 缺点:由于IE6-7不支持:after，使用zoom:1触发hasLayout。
• 代表网站:百度、淘宝网、网易等