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

andong777 发布于2019-08-29 10:57 / 1226人阅读

摘要：父元素的顶端会限制浮动元素防止一直浮动到页面顶端。例子戳这里清除浮动清除浮动的目的是为了解决高度塌陷的问题撑开浮动父元素。原理会在元素的之上增加一个清除区域这个区域会在元素的上增加额外间隔并且不允许浮动元素进入这个区域。

浮动概念

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

浮动影响 浮动元素会造成父元素塌陷

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


    


.super{
    border:1px solid blue;
}

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

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

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


    
    
 

.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的空标签

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

原理: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 张鑫旭

GPU云服务器云服务器清除浮动 html浮动向上浮动上下浮动左右浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111327.html

深入清除浮动原理

摘要：如下图所示可以看到父元素的高度为为了解决这种状况就要清除浮动了。下面详细看一下这两大类清除浮动的方式及原理。所以，避免穿透啊，清除浮动什么的也好理解了。关于浮动设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示：...

freewolf 2019-08-29 15:25 评论0 收藏0
css浮动、BFC、定位问题

摘要：元素框从文档流完全删除，并相对于其包含块定位。产生折叠的必备条件必须是邻接的而根据规范，两个是邻接的必须满足以下条件必须是处于常规文档流非和绝对定位的块级盒子并且处于同一个当中。 1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素？有什么特征？所谓浮动元素，即是设置了浮动属性的元素。其特征为： 1.浮动的框可以向左或者向右移动，直到它的外...

Tony 2019-08-29 12:53 评论0 收藏0
理解 BFC (Block Formatting Model)

摘要：是指块级元素，就是会强制换行的元素，比如。将元素推向左侧。请根据不同的实际情况，选择最合适的方式。再次重申一下，是为子元素创建定位环境。，由于浮动元素占据了一定的宽度，新创建的会因此而变窄。这里只是为了更好地去理解而做一个例子。什么是 BFC W3C 为浏览器规定了三种定位模型：Normal Flow, 浮动, 和绝对定位。本文所介绍的 BFC (Block Formatting M...

Tonny 2019-08-28 18:18 评论0 收藏0
Bootstrap清除浮动的实现原理

摘要：当中包含属性时，如果没有包含空格，会造成清除浮动元素的顶部底部有一个空白设置也可以解决这个问题。这样做，其一是为了和其他清除浮动的方式的效果保持一致其二，是为了与下设置后的效果一致即阻止合并的效果。 Boostrap清除浮动的css如下： .clearfix:before, .clearfix:after { content: ; display: table; } ...

刘德刚 2019-08-30 15:52 评论0 收藏0