清除浮动

清除浮动

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

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

不兼容

伪元素：

不可滥用清除浮动

【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只应用在包含浮动子元素的『父级元素』上

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

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

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切勿滥用，只能用于包含浮动子元素的父级元素上?

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

解决高度塌陷更好的方法

clear通常应用形式

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

 清楚浮动带来的影响，浮动是一直存在的

一：脚底插入clear:both;（与外接触）

二：父元素BFC（IE8+)或haslayout(IE6/IE7)(不与外界接触）

clear通常应用形式

1. HTML block水平元素底部走起<div>...</div>

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

切勿滥用

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

清除浮动在父元素上添加:after{content:"";display:table-cell;clear:both;}

 子元素使用浮动，会使父元素高度塌陷（浮动元素脱离原始文本流，不占空间，父级对象盒子无法撑开），就产生浮动的效果。

clearfix清楚浮动更好的方式 .clearfix:after{ content:''; display:table; clear:both; }

 子元素使用浮动，会使父元素高度塌陷（浮动元素脱离原始文本流，不占空间，父级对象盒子无法撑开），就产生浮动的效果。

浮动产生的副作用：

1、背景不能显示（颜色、图片）

2、边框不能撑开

3、margin、padding不能显示（特别是上下边）

不清除浮动时的效果：

https://img4.mukewang.com/5c6e261b0001a71508750646.jpg

清除浮动的方法：

1.为父级元素设置确定的高（计算好内容高度）

2.clear:both清除浮动

3.父级div定义 overflow:hidden（对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。）

overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

解决浮动问题

清除浮动:

方法1：脚底插入clear:both;

通常应用形式：

1、HTML block水平元素地步 -<div></div>

2、CSS after伪元素底部生成  - .clear:afer {}

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

通常声明：

float:left/right

position:absolute/fixed

overflow:hidden/scroll(IE7+)

display:inline-block/table-cell(IE8+)、table-caption或者inline-flex

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

// [块级格式化上下文 (Block Fromatting Context)]

权衡后的策略：

IE8以后使用伪元素 。clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}

或clearfix:after{content:'';display:table;clear:both;}

IE6\IE7 .clearfix {*zoom:1;}

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

11111111111

清除浮动更好的方法：

高级浏览器：.clearfix:after {content:'';display:table;clear:both;}

ie6,ie7: .clearfix{*zoom:1;}

clearfix应该应用在浮动子元素的父级元素上

clear清除浮动策略

IE8

IE6 IE7

清除浮动（带来的影响）

清除浮动更好的方法：

高级浏览器：.clearfix:after {content:'';display:table;clear:both;}

ie6,ie7: .clearfix{*zoom:1;}

clearfix应该应用在浮动子元素的父级元素上

清除浮动的两大基本方法

消除浮动带来的影响：

1. clear:both 与外部有联系

2. BFC/haslayout 封闭的结构

策略：

.fix:after{} 高级浏览器

.fix{} IE6,IE7

clear会产生margin重叠而bfc不会，bfc会把包含内的所有css属性作用与本身，不对外部造成影响，外部margin-top不会被其影响，而clear如果设置margin-bottom的话，会对外部其他元素造成影响，最明显的就是margin重叠，

display:table之后，标签并没有变成table,而是有了table类似的属性，比如自动包裹内容，自成一行等等。但是毕竟还不是table，所以和table的样式没有关系。

清除浮动带来的影响：

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

.clearfix { *zoom:1;}

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

两种方法的差异： clear：与外界还有联系，例如会产生margin重叠的效果 

BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法使用所有浏览器

1. html block 水平元素底部<div></div>

2. .clearfix:after

• 请浮动2
  

• 清浮动
  

！！！