Float与兼容性

Float与流体布局

float浮动的滥用

清除浮动

被误解的float浮动

float历史float历史

float与流体布局

浮动的特性

不足：容易出问题；需要元素固定尺寸；低版本IE不适用

清除浮动

1. 提供通道，与外部接触，例如可以发生button重叠效果

2. 形成封闭结构，不对外部产生任何影响

不兼容

伪元素：

不可滥用清除浮动

float的初衷：文字环绕效果

【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.浮动具有破坏性，会让父元素高度塌陷

大萨达撒大声地

清除浮动带来的影响 应用在浮动元素的父级元素上 慎用

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

破坏性 父容器塌陷

包裹的知识。

这里，关于右浮动带来的ie7兼容问题的解决方法
①不改变dom，给“左侧”套上元素标签，并左浮动，形成左右浮动
<div>
<span style="float: left">左侧</span>
<span style="float: right">右侧</span>
</div>

②改变dom位置，也就是将右浮动的元素放到前面：
<div>
<span style="float: right">右侧</span>
左侧
</div>

智能能自适应

float: display:table-cell      IE8+ display:inline-block    IE7

float仍会占据其位置，position会覆盖文档流中的其他元素。

/*伪元素是行内元素 正常浏览器清除浮动方法*/    

   .clearfix:after{    content: "";      

  display: block;     

   height: 0;   

     clear:both;     

   visibility: hidden;    }   

/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/    

 .clearfix{        *zoom: 1;}

清浮动——清除浮动带来的影响

1、底部插入clear:both;

与外部可直接接触，可使margin发生重叠效果    

2、父元素BFC（IE8+）或haslayout（IE6/7)

形成一个封闭的结构，保护里面的任何声明对外部产生影响。因此margin不会发生重叠

3、权衡之策

.clearfix切勿滥用，只能用于包含浮动子元素的父级元素上?

float特性-包裹与破坏
浮动是魔鬼，无宽度、无图片、无舞动

一、包裹

• 包裹
  

• 坚挺

• 隔绝（BFC，block formatting content，块级格式化上下文）

二、破坏（容器遭到破坏）

学习的浮动的做好用以及如何运用

左右浮动文字居中

浮动“砖头化”和“去空格化”

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

解决高度塌陷更好的方法

clear通常应用形式

单侧固定：

设置图片的width以及左浮动，

同时设置padding-left/margin-left来使左侧固定（其中，margin-left或padding-left为0时即以前的文字环绕效果）