今天完成的事情：

float初衷为了文字环绕效果

float特性：包裹与破坏

包裹：

1收缩：水平方向使其宽度收缩

2坚挺：竖直方向

3隔绝：里面的东西发生的任何事情对外面没有任何影响（bfc:块级格式化上下文）

具有包裹性的其他小伙伴：

1. display: inline-block/table-cell/...

2. position: absolute（近亲）/fixed/sticky

3. overflow: hidden/scroll

破坏（父级元素高度被破坏，高度塌陷）（浮动是魔鬼）

下面的属性也有破坏性

1. display: none

2. position: absolute（近亲）/fixed/sticky

浮动的三无准则：

1.无宽度

2.无图片

3.无浮动

float起初的本意是让文字环绕

float使得父元素高度塌陷，不是bug,是标准

清除浮动方法：

1.父元素底部插入clear：both；依然可以对外部产生影响

2.父元素BFC（IE8+）或haslayout（IE6/IE7）；隔绝外部，不会对外部产生任何影响

【CSS】【清除浮动(带来的影响)】

方法一：在底部插入clear:both

1.HTML block水平元素放置于底部 <div ...></div>

2.CSS after伪元素在底部生成 .clearfix:after{}

方法二：父元素BFC(IE8+)或haslayout(IE6/IE7)

float:left/right

position:absolute/fixed

overflow:hidden/scroll(IE7+)

display:inline-block/table-cell(IE8+)

width/height/zoom:1/...(IE7/IE7)

★由于以上两个方法各有缺点所以：

权衡后的策咯

.clearfix:after{content:''; display:block; height:0; overflow:hidden; clear:both;}(IE8+)

.clearfix{*zoom:1;} (IE6/IE7)

或

.fix:after{}

.fix{}

★更好的方法：

.clearfix:after{content:''; display:table; clear:both;}(IE8+)

.clearfix{*zoom:1;} (IE6/IE7)

★切勿滥用

.clearfix只应用在包含浮动子元素的『父级元素』上

浮动的作用: 实质上是实现文字环绕效果

1、元素的block块状化（砖头化）

2、破坏性造成的紧密排列属性(去空格化)

例如

<button>1</button>

<button>2</button>

<button>3</button>

<button>1</button> 

<button>2</button> 

<button>3</button> 

用float后两个button标签之间没间隙。用 也没，但不是真的没，是环绕了，去后面了。区别回车环绕到后面看不到没间隙不现实 空格显示到后面。

float砌砖布局的缺点:

1、容错性比糟糕，容易出现问题；

2、这种布局需要元素固定尺寸，很难重复使用；

3、在低版本的IE下会有许多问题

1.两边按钮，中间标题效果

float:left(左按钮);float:right（右按钮）;text-align:center(中间标题)

2.单侧固定（微博格式）

width+float(左侧元素)

padding-left/margin-left(右侧元素)

下面这个是右浮动，改变DOM位置的流体布局写法

.mib_head_r{ width:56px; float:right;}

.mib_feed_flow{ margin-right: 76px;}

实现左浮动，并且不改变DOM位置的流体布局的写法：

.mib_full_float{ width:100%; float:left;}

     .mib_feed_flow{ margin-right: 76px;} //在自适应容器外部添加一个标签

.mib_head_l{ width:56px; float:left; margin-left:-56px;}

模式

width:100%+float

  padding-left/margin-left

width+float+margin负值

左右都智能自适应：

float

display:table-cell;(IE8+)

display:inline-block;IE7

float兼容性，就是不要用IE6,7得了

IE6浮动bug

1.float双倍边距bug

2.跟随float元素3px bug

3.float元素后面的斜体文字会有下沉的bug

IE7浮动bug

1.含clear的浮动元素包裹不正确的问题

2.浮动元素倒数2个莫名垂直间距问题

3.浮动元素最后一个字符重复问题

4.浮动元素楼梯排列问题
明天计划的事情：复习task1-task3。
遇到的问题：float排版
收获：float这就是用来做环绕的。