浮动与清除浮动 - 黑马程序员技术交流社区

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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