float浮动

一、课程介绍

 

1.CSS Float(浮动)简介

 

• 普通流(标准流)介绍
• CSS Float (浮动)的基础知识
• 使用浮动后产生的问题

 

2.课程内容

 

清除浮动(闭合浮动)常用方法

Float案例演示

课程总结

 

二、CSS定位机制

普通流(标准流)

浮动

绝对定位

普通流(标准流):默认状态,元素自动从左往右,从上往下的排列。

 

三、CSS Float (浮动)的基础知识

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

 

四、浮动的基本语法

float:left    靠左浮动

float.right   靠右浮动

float:none  不使用浮动

 

五、使用浮动后产生的问题

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

 

六、清除浮动语法

clear : none | left | right | both;

设置了float的元素会影响其他相邻元素,需要使用clear清除浮动，

clear只会影响自身，不会对其他相邻元素造成影响!

 

 

1.清除浮动常用方法

方法一:在浮动元素后使用一个空元素。

例如: <div class= "clear"> </div>

 

方法二:给浮动元素的容器添加overflow:hidden;

*zoom:1; /*触发 hasLayout 兼容IE 6、7*/

 

方法三:使用CSS3的:after伪元素

.clearfix:after{

content:" .";

display: block;

height:0;

visibility: hidden;

clear:both;

}

.clearfix { *zoom: 1; /* 触发hasLayout兼容IE 6、7*/ }

 

2.其它方法

①   父级元素定义height。只适合高度固定的布局。

②   父级元素也一起浮动。 不推荐,会产生新的浮动问题。