浮动(Floats)原理与清除浮动

浮动概念

浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另外一个浮动元素的外边界为止。因为浮动框不在文档的普通流中,因此文档的普通流中的块级元素表现得就像浮动元素不存在同样。

浮动影响

浮动元素会形成父元素塌陷

当给元素设置float以后,元素脱离文档流,父元素没有设置height,形成塌陷。

<div class="super">
    <div class="sub"></div>
</div>

.super{
    border:1px solid blue;
}

.sub{
  float: left;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

浮动元素的左(右)外边界不能超出其父元素的左(右)内边界。

在不设置margin为负值和父元素还有剩余空间的状况下,浮动元素的外边界(margin)不会超出父元素的内边界(padding)。

<div class="super">
    <div class="sub1"></div>
    <div class="sub2"></div>
</div> 

.super{
    margin: 0 auto;
    padding: 10px;
    border:1px solid blue;
     width: 300px;
}

.super:after{
  clear: both;
  content: '';
  display: block;
}

.sub1{
  float: left;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.sub2{
  float: right;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

浮动元素不会重叠。

这个也是在margin不会为负值和父元素还有剩余空间的条件下适用的。
这个是我对《CSS权威指南》中浮动这一章节中规则二和规则三的理解,如下是原文。

2.The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left-floating (or right-floating) element that occurs earlier in the document’s source, unless the top of the later element is below the bottom of the former.

3.The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element to its right. The left outer edge of a right- floating element may not be to the left of the right outer edge of any left-floating element to its left.

这两个规则是保证两个浮动元素不重叠的基础。

表现为当一个浮动元素往左(右)靠的时候,在这个元素左(右)边已经存在一个浮动元素,他们不会重叠,后来者紧挨着先来者排列。若是浮动元素们的总宽度已经超过父元素的宽度,浮动元素之间也不会重叠,依照HTML结构的顺序,从在一行排列不下的浮动元素开始会移动到下一行。

例子戳这里!

浮动元素的顶端不能比其父元素的内顶端更高,不能比以前出现的浮动元素顶端高。

这个规则也是在margin-top不为负值的状况下成立。

父元素的顶端会限制浮动元素,防止一直浮动到页面顶端。
对于下图右边的例子,sub2在sub1下面,sub1右边的空间已经不足以容纳sub2,可是足够容纳sub3,而sub3没有上浮,那是由于他的的顶端就不能超过sub2的顶端,这个例子足以印证浮动元素的顶端不能比以前出现的浮动元素顶端高。

例子戳这里!

清除浮动

清除浮动的目的是为了解决高度塌陷的问题,撑开浮动父元素。经常使用的通常有几种方法:

增长一个样式为clear:both的空标签

<div style="clear:both;"></div>

把上面这句标签放到浮动元素的父元素的最后。

原理:clear会在元素的margin-top之上增长一个清除区域(clearance),这个区域会在元素的margin-top上增长额外间隔,而且不容许浮动元素进入这个区域。

• 优势:方便,兼容性强。

• 缺点:多出许多无心义的标签,增长维护成本,并且稍不注意中间多了个空格会产生一段空白高度。

父元素设置浮动

优势:简单,代码少,浏览器支持好。
缺点:父级使用浮动以后,浮动形成的影响仍旧存在,而且不可能父级往上一级级都使用浮动。

使用overflow、zoom属性

.fix{
    overflow:hidden(auto、scroll); 
    zoom:1;
}

• 优势:代码简洁,兼容性好,不产生多余标签。

• 缺点:设置该fix类的标签的内容超出该标签的时候会被隐藏(或产生滚动条)。

父元素设置浮动

优势:简单,代码少,浏览器支持好。
缺点:父级使用浮动以后,浮动形成的影响仍旧存在,而且不可能父级往上一级级都使用浮动。

父元素设置position

原理:在position的值不为relative或static的状况下,会造成BFC。

这种方式在父元素本来就须要设置position为fixed或者absolute的时候能够优先采用。

优势:简单,代码少,浏览器支持好。
缺点:改变父元素布局,影响总体布局。

使用：after

.fix:after{
    display:block; 
    content:''; 
    clear:both; 
}

原理相似添加新的标签而后设置clear:both;,但使用伪类的方法没有多余标签。

• 优势:代码简洁,兼容性好,不产生多余标签。

以上方法中,第一种增长一个样式为clear:both的空标签的方法不建议使用,会增长无心义标签,其余设置父元素浮动,改变父元素position、overflow的方法依状况而定,若是父元素自己就有这方面的样式需求,那很合适,若是没有的话仍是采用最后一种伪元素的:after的方式最为常见。

总结

关于浮动的学问还有更可深刻的空间,这篇博客也只是对本身学习的成果起到梳理做用,对于浮动在各场景产生的影响,须要大量的实践去累积去体会,才能深入掌握float,在往后有新的认识的时候会再回来更新,若有不一样看法也欢迎你们前来指正。

参考

• 《CSS权威指南》

• CSS float浮动的深刻研究、详解及拓展(一) by 张鑫旭

• CSS float浮动的深刻研究、详解及拓展(二) by 张鑫旭