浮动原理详解

                    浮动详解

1.浮动属性

语法：float:none/left/right;

注：*浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。      

       *浮动后的元素会脱离标准流(不会脱离文本流)      

       *浮动后的元素相当于置换元素元素（一行显示多个、可以设置宽高）

注意：

1.浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动，多出的盒子会另起一行显示

2.如果行内元素有了浮动，则不需要转块级，因为是行内块元素可以直接设置宽高

2.为什么需要清除浮动

1.由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

2.清除浮动的本质就是清除浮动元素造成的影响

3.如果父盒子本身有高度，则不需要清除浮动

4.清除浮动之后，父级元素就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流

语法：clear：left（清除左浮动）right（清除右浮动）both（同时清除两侧浮动影响）

清除浮动的方法：

1.额外标签法：

也称为隔墙法，是W3C的额外做法

额外标签法会在浮动元素末尾添加一个空的标签

例如<div style="clear:both"></div>,或者其他标签等（如<br>等）

标签一定是要块级元素

缺点：添加许多无意义的标签，结构差

2.父级添加overflow：

可以给父级元素添加overflow属性，将其属性设置为hidden，auto或scroll

注意是给父元素添加代码

缺点：无法显示溢出部分

3.：after伪元素法：

:after是额外标签法的升级版，也是给父元素添加

.clearfix:after{

content:"";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix(ie6/7专有)

*zoom：1；

缺点：照顾低版本浏览器

4.：双伪元素清除法：

也是给父元素添加

.clearfix:before，.clearfix:after{

content："0";

display:table;

}

.clearfix:after{

clear:both;

}

.clearfix{

clear:both;{

*zoom：1；

}

缺点：照顾低版本浏览器