浮动（用来页面布局的）

布局的三种机制： 普通流（标准流）     浮动        定位

普通流：块级元素会独占一行从上向下的顺序排列。行内元素会按照从左向右的顺序一行排列。碰到父级边缘会自动换行。都是按照默认的方式显示排列

浮动：让盒子浮动起来，多个块级盒子占一行

因为一些网页布局的要求，标准流不能满足需求，所以需要用到浮动

概念：1.元素浮动会脱离标准流的控制 2.移动到指定位置

        float : { none (默认值，不浮动）   left（左浮动）    right（右浮动）

作用：1，可以让块级元素在同一行显示

2，可以让盒子水平靠左或靠右对齐

3，可以让文字环绕的效果

浮：漂浮在标准流上面，脱离标准流

漏：浮动的盒子把原来的位置漏给下面标准流的盒子。不占有原来的位置。俗称 脱标

特：float属性会改变元素的display显示模式。不再是块级元素。类似于转成行内块，但之间没有间隙。

     如果父级盒子装不开这些盒子。多的会另起一行显示

给浮动元素添加一个标准流的父级盒子。减小对其他标准流的影响

浮动元素与父盒子的关系：

子盒子的浮动参照父盒子对齐。既不会覆盖住边框，也不会覆盖内边距。

浮动元素与标准流兄弟盒子的关系

两盒子都浮动会顶部贴着对齐

如果上盒子不浮动，下盒子浮动，下盒子贴在上盒子下边

浮动只会影响后面或当前的标准流，不会影响上面的标准流

如果一个盒子中的多个盒子有一个浮动，其他兄弟盒子应当都设置浮动。确保一行显示

为什么要清除浮动

因为很多情况下父盒子不方便给高度，但是子盒子浮动了不占位置，父级盒子高度为0.就影响了下面的标准流。

清除浮动主要为了解决父级元素因子级浮动引起的内部高度为0的问题。清除浮动后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

（清除）clear: left    right   both（左右两侧。一般只用这个值）;

清除浮动的四种方法：

1.额外标签法（隔墙法）

   在最后一个浮动的盒子后面添加一个空标签，给空标签设置属性 clear: both;

缺点：添加太多无用的空标签，结构化较差

2.父级添加over flow 属性方法

    给父级盒子添加属性    over flow: hidden;

代码简洁，但内容增多时会造成不会自动换行，导致内容被隐藏掉

3.清除浮动之after伪元素

.clearfix:after {

content: “ ”;

display:block;

height:0;

visibility: hidden;

clear: both;}

.clearfix { *zoom:1;}      →这一步是解决IE6 7不兼容的问题

after伪元素默认是行内元素。就是利用了css在当前标签的内部后面创建一个”标签“

4.双伪元素清除浮动

.clearfix:before,

.clearfix:after {

content:””;

display:table;}

.clearfix:after {

clear:both;}

.clearfix { *zoom:1;}      →这一步是解决IE6 7不兼容的问题

什么时候用清除浮动：当父级盒子没有高度，子盒子浮动影响了下面的布局了

浮动（用来页面布局的）

布局的三种机制： 普通流（标准流）     浮动        定位

普通流：块级元素会独占一行从上向下的顺序排列。行内元素会按照从左向右的顺序一行排列。碰到父级边缘会自动换行。都是按照默认的方式显示排列

浮动：让盒子浮动起来，多个块级盒子占一行

因为一些网页布局的要求，标准流不能满足需求，所以需要用到浮动

概念：1.元素浮动会脱离标准流的控制 2.移动到指定位置

        float : { none (默认值，不浮动）   left（左浮动）    right（右浮动）

作用：1，可以让块级元素在同一行显示

2，可以让盒子水平靠左或靠右对齐

3，可以让文字环绕的效果

浮：漂浮在标准流上面，脱离标准流

漏：浮动的盒子把原来的位置漏给下面标准流的盒子。不占有原来的位置。俗称 脱标

特：float属性会改变元素的display显示模式。不再是块级元素。类似于转成行内块，但之间没有间隙。

     如果父级盒子装不开这些盒子。多的会另起一行显示

给浮动元素添加一个标准流的父级盒子。减小对其他标准流的影响

浮动元素与父盒子的关系：

子盒子的浮动参照父盒子对齐。既不会覆盖住边框，也不会覆盖内边距。

浮动元素与标准流兄弟盒子的关系

两盒子都浮动会顶部贴着对齐

如果上盒子不浮动，下盒子浮动，下盒子贴在上盒子下边

浮动只会影响后面或当前的标准流，不会影响上面的标准流

如果一个盒子中的多个盒子有一个浮动，其他兄弟盒子应当都设置浮动。确保一行显示

为什么要清除浮动

因为很多情况下父盒子不方便给高度，但是子盒子浮动了不占位置，父级盒子高度为0.就影响了下面的标准流。

清除浮动主要为了解决父级元素因子级浮动引起的内部高度为0的问题。清除浮动后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

（清除）clear: left    right   both（左右两侧。一般只用这个值）;

清除浮动的四种方法：

1.额外标签法（隔墙法）

   在最后一个浮动的盒子后面添加一个空标签，给空标签设置属性 clear: both;

缺点：添加太多无用的空标签，结构化较差

2.父级添加over flow 属性方法

    给父级盒子添加属性    over flow: hidden;

代码简洁，但内容增多时会造成不会自动换行，导致内容被隐藏掉

3.清除浮动之after伪元素

.clearfix:after {

content: “ ”;

display:block;

height:0;

visibility: hidden;

clear: both;}

.clearfix { *zoom:1;}      →这一步是解决IE6 7不兼容的问题

after伪元素默认是行内元素。就是利用了css在当前标签的内部后面创建一个”标签“

4.双伪元素清除浮动

.clearfix:before,

.clearfix:after {

content:””;

display:table;}

.clearfix:after {

clear:both;}

.clearfix { *zoom:1;}      →这一步是解决IE6 7不兼容的问题

什么时候用清除浮动：当父级盒子没有高度，子盒子浮动影响了下面的布局了