HTML-float浮动

float浮动

1、 float浮动介绍

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

 

 

float属性介绍

1、 普通流介绍

CSS定位机制

 

普通流（标准流）	浮动	绝对定位
默认状态，元素自动从左往右，从上往下的排列	会使元素向左或向右移动,只能左右,不能上下。

 

块元素	行内元素
独占一行	与其他元素同行显示
可以设置宽、高	不可以设置宽、高
如果不设置宽度，宽度默认为容器的100%	宽高就是文字或图片的宽高
div、p、h1~h6、ul、ol、li、dl、dt、dd	span、a、u、em…

 

 

2、 浮动的基础知识

概念：

-会使元素向左或向右移动,只能左右,不能上下。

-浮动元素碰到包含框或另一个浮动框,浮动停止。

-浮动元素之后的元素将围绕它,之前的不受影响。

-浮动元素会脱离标准流。

 

基本语法：

-float:left：靠左浮动

-float:right：靠右浮动

-float:none：不使用浮动

      

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

浮动溢出：元素使用浮动后会脱离普通流,出现"高度塌陷”

 

4、 清除浮动

语法：clear : none  /  left  /   right  /  both;

*设置了float的元素会影响其他相邻元素,需要使用clear清除浮动,clear只会影响自身,不会对其他相邻元素造成影响!

 

5、 清除浮动的常用方法

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

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

 

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

*z00m: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*/ }

 

6、 清除浮动的其它方法

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

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