CSS浮动原理及清除浮动方法

xvzhengyang

2018-02-02

关注关注

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，且脱离文档流（所以会产生覆盖和有关清除浮动的问题，下面我会具体说道）

举个例子：

CSS浮动原理及清除浮动方法

有图可得：

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框

还有另外一种情况：

CSS浮动原理及清除浮动方法

同样由图可得：

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

【清除浮动】

上面我们说道，元素浮动会脱离文档流，所以不占据空间。这时会产生两个问题

①元素覆盖；②清除浮动

接下来具体讲下清除浮动：

因为不占据空间，所以如果包含该浮动元素的父级没有定义宽高时，会产生一个问题。那就是父级元素为空，浏览器渲染的直观效果就是包含块没有包围浮动元素。或者叫高度塌陷，即浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了，这时候我们就需要用到清除浮动的属性clear清除浮动

【属性值】clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，从而实现效果

具体清楚浮动的方法主要以下几种：

1、添加空div法

在浮动元素下方添加空div,并给该元素写css样式：

{clear:both;height:0;overflow:hidden;}

2、方法：给浮动元素父级设置高度

我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了

缺点：在浮动元素高度不确定的时候不适用

3、方法：以浮制浮（父级同时浮动）

何谓“以浮制浮”呢？就是让浮动元素的父级也浮动下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题

7、 br 清浮动

<div class="box">
    <div class="top"></div>
    <br clear="both" />
</div>

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的

缺点：不符合工作中：结构、样式、行为，三者分离的要求

5、给父级添加overflow:hidden

问题：需要配合宽度或者 zoom 兼容IE6 IE7；

在非ie 和 ie7及其以上版本的浏览器中，可以使用 overflow ：hidden 等方法来进行清除浮动，所以

【缺点】IE7以下版本不兼容

IE6对overflow属性的理解有误，说白了是IE6的一个bug，IE7开始已经修复这个问题，也就是说IE7/IE8下overflow:hidden可以清除浮动造成的影响

overflow: hidden;
*zoom: 1;

这里涉及到一个概念：包裹

所谓包裹就是，容器自身的尺寸是按照被包容的元素决定的（包裹概念是从张鑫旭博客中学习到的）

事实上你只要理解，是因为IE的hasLayout和其他浏览器的overflow:hidden导致浮动元素重新占据了空间，那么一切就可以解释了

【哪些情况会发生包裹？】

比如行内框元素span包含文字

比如没有设置宽度和高度的一个浮动div块

比如没有设置宽度和高度的一个设置了display:inline的div

比如设置了display:inline-block的a标签

比如设置了overflow:hidden的元素

比如设置了position:absolute绝对定位的元素

它们的尺寸就由包容的元素决定

也就是说具有包裹性的有6种：

行内框，浮动，display:inline-block的行内框，display:inline的块框，overflow:hidden，position:absolute

但是overflow:hidden在IE6有BUG，必须触发hasLayout才可以

以上所说的清除浮动和通常的clear是不一样的，我们只是清除浮动造成的影响，更多的作用是让浮动重新占据空间。而clear则会在清除浮动后换行，作用是不一样的

6、万能清除法 after伪类清浮动（现在主流方法，推荐使用）

:after{
       content:".";
       clear:both;
       display:block;
       height:0;
       overflow:hidden;
       visibility:hidden;
}

同时为了兼容 IE6，7 同样需要配合zoom使用例如：

.clearfix:after{
   content:".";/*加一段内容*/
   display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
   height:0;/*避免生成的内容破坏原有布局高度*/
   clear:both;/*清除浮动*/
   visibility:hidden;/*让生成的内容不可见*/
  }
  .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}

需要注意的东西：

after伪类：元素内部末尾添加内容；

:after{content"添加的内容";} IE6，7下不兼容

zoom 缩放

a、触发 IE下 haslayout，使元素根据自身内容计算宽高。

b、FF 不支持；

【缺点】

zoom:1是解决IE6的办法，但是它不能通过w3c，所以我们可以用条件注释，这样就可以通过了。但是如果我们不想用条件注释呢？下面有方法

/*撑开父容器*/  
.clearfix:after {  
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
}  
/* 分别在两段 css 块中设置 这样可以不必使用zoom:1;又通过W3C，又不需要用条件注释*/   
.clearfix {  
    display: inline-block;  
}   
.clearfix {  
    display: block;  
}

还有个方法也可以通过W3C，而且【更简单】

/*撑开父容器*/  
.clearfix:after {  
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
}  
/* 或者给父容器height:1% 因为1%并不会改变实际高度 这样也可以通过W3C */   
.clearfix {  
    height:1%;  
}

【拓展】

zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

但很遗憾的是，它通不过W3C验证

zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。

在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。

譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等

Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。

然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中，也就是CSS3中的transform: scale这个属性来实现

用法：ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法

.父元素 {   overflow: auto; zoom: 1   }

【拓展】

关于zoom:1;和IE的hasLayout属性我在后面文章里做了介绍

xvzhengyang

0 关注 0 粉丝 0 动态

关注关注

安科网

CSS浮动原理及清除浮动方法

xvzhengyang

xvzhengyang

xvzhengyang