05 float浮动：

05 float浮动：

第二章 float属性介绍<重难点>：

CSS定位机制：

​ 普通流（标准流）、 浮动、 绝对定位

​ 普通流（标准流）：默认状态，元素自动从左往右，从上往下的排列。《块级元素和行内元素默认状态就构成了普通流》

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

​ · 会使元素向左或向右移动，只能左右，不能上下。

​ · 浮动元素碰到包含框或另一个浮动框，浮动停止。

​ · 浮动元素之后的元素将围绕它，之前的不受影响。

​ · 浮动元素会脱离标准流。

浮动的基本语法：

​ float:left 靠左浮动

​ float:right 靠右浮动

​ float:none 不使用浮动

使用浮动后产生的问题：

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

​ 浮动时，子元素会寻找父元素的边！

清除浮动常用方法（常用的3种方法）：

清除浮动语法：

​ clear:none|left|right|both（两者都清）;

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

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

​ 例如：

<div class="clear"></div>

.clear{clear:both;}

方法2：给浮动元素的容器(父元素)添加 overflow:hidden;

​ 注意：设置 *zoom:1; /触发hasLayout兼容IE 6、7/

方法3：使用CSS3的:after伪元素

.claerfix:after{
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix{*zoom:1;/*触发hasLayout兼容IE 6、7*/}

清除浮动的其他方法（了解即可）：

​ 1、父级元素定于height。只适合高度固定的布局。

​ 2、父级元素一起浮动。不推荐，会产生新的浮动问题。

注意：子元素添加浮动后，需要在相应的父元素里面清除浮动（方法2）！

​ 当给元素添加浮动后，相应的元素就会从文档流脱离出来，即之前占的空间都没有了，后面的元素会往上挤！解决方法是给相应的父元素添加清除浮动（添加overflow:hidden找回坍塌高度)

Float课程总结：

​ 会使元素左右移动

​ 浮动元素会脱离普通流

​ 元素浮动后具备inline-block（行内块元素）属性

清除浮动方法推荐：

​ 1、使用CSS3：after伪元素清除浮动

​ 2、使用overflow:hidden清除浮动