二.5 页面化妆师CSS之float浮动

CSS Float（浮动）简介

• 普通流
• CSS Float（浮动）的基础知识
• 使用浮动后产生的问题
• 清除浮动（闭合浮动）常用方法
• Float案例演示

1CSS Float（浮动）简介

1.1CSS定位机制

1.2CSS Float（浮动）的基础知识

• 会使元素向左或向右移动，只能左右，不能上下。
• 浮动元素碰到包含框或另一个浮动框，浮动停止。
• 浮动元素之后的元素将围绕它，之前的不受影响。
• 浮动元素会脱离标准流。

1.3浮动的基本语法

1. float:left        靠左浮动
2. float:right      靠右浮动
3. float:none     不适用浮动

1.4 使用浮动后产生的问题

• 元素使用浮动后会脱离普通流，出现“高度缺陷”
• 浮动溢出
• 清除浮动

2.清除浮动

2.1清除浮动语法:clear：none | left | right | both；

2.2清除浮动常用两种方法

1. 在浮动元素后使用一个空元素----
2. 给浮动元素的容器添加 overflow:hidden；
3. 使用CSS3的:after伪元素
4. 
5. 清除浮动其他方法

3.代码示例