深入清除浮动原理

freewolf 发布于2019-08-29 15:25 / 1356人阅读

摘要：如下图所示可以看到父元素的高度为为了解决这种状况就要清除浮动了。下面详细看一下这两大类清除浮动的方式及原理。所以，避免穿透啊，清除浮动什么的也好理解了。

关于浮动

设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。
浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示：

.warper{
    width: 200px;
    border:1px solid  #ff6633;
}
.float-1{
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.float-2{
    float: left;
    background: #ff0;
    height: 50px;
    width: 100px;
}
//html

可以看到父元素的高度为0,为了解决这种状况就要清除浮动了。

清楚浮动的方式

总结了一下，大致有如下几类:

1. 结尾空元素或者after等伪元素或者br 来clear
2. 父元素同样浮动
3. 父元素设置overflow为hidden或者auto 
4. 父元素display：table

大致归类，可以分为两大类，1使用clear的属性，后面的可以归为一类，都是通过触发BFC来实现的。
下面详细看一下这两大类清除浮动的方式及原理。

clear属性

clear 属性规定元素盒子的边不能和浮动元素相邻。该属性只能影响使用清除的元素本身，不能影响其他元素。
换而言之，如果已经存在浮动元素的话，那么该元素就不会像原本元素一样受其影响了。
第一种方式里我们的填补元素(我自己的称呼)，就是起这种作用。

//这里当然可以换成一个空的div，
等，原理和效果都是一致的  
.warper:after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

此时after伪元素设置clear：both之后表明，我两边都不能接受浮动元素，原本受浮动元素影响，伪元素的位置在浮动元素下方如图：

这样显然也不能撑起父元素的高度。设置之后，需要重新安排安排了。
既然两边都不接受浮动元素，但浮动元素位置也确定了，那只能把伪元素放在下边，如图：

可以看到，伪元素的位置在最下方了，距顶部的高度为float元素的高度，顺带撑起了父元素的高度。
同样适用其他填充元素（display为block），都能达到相同的目的。
在看后面几种原理之前我们需要先看一下BFC的定义。

BFC 块级格式化上下文：BFC(block formatting contexts)

照本宣科的定义看起来可能不大好理解，BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
借用张鑫旭大大的一句话，BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。
所以，避免margin穿透啊，清除浮动什么的也好理解了。

正如下面的解释：

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats)
在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式，则为紧挨右边框）。即使存在浮动也是这样的（尽管一个盒子的边框会由于浮动而收缩），除非这个盒子的内部创建了一个新的BFC浮动，盒子本身将会变得更窄）。

BFC的特性

块级格式化上下文会阻止外边距叠加

块级格式化上下文不会重叠浮动元素

块级格式化上下文通常可以包含浮动

换句话说创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然
同时BFC任然属于文档中的普通流。所以呢浮动也就解决了，关于BFC以后要专门搞个文章仔细研究一下。

看到这里就可以知道了，为什么可以拿来清除浮动了，表现为BFC的元素都是一个十分个性的存在，无论里面怎么折腾，对外表现始终如一。
大家肯定可以猜到，上面几种利用了BFC的清除方式肯定是触发了BFC的条件，让父元素变为BFC。我们来看一下触发BFC的条件，看是不是如我们所想。

BFC触发条件

CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进一步说明。

float 除了none以外的值 
 
overflow 除了visible 以外的值（hidden，auto，scroll ） 
 
display (table-cell，table-caption，inline-block) 
 
position（absolute，fixed） 
 
fieldset元素

由上面可以对比一下，我们提到那几种方法，就是触发了BFC而已。
看个例子

.warper{
    width: 200px;
    border:1px solid  #ff6633;
    // 下面属性任选其一
    overflow: hidden;
    overflow: auto;
    float: left;
    display:inline-block;
    position: fixed;
}

结束语 参考文章

CSS深入理解流体特性和BFC特性下多栏自适应布局
理解CSS中BFC

到这里清除float相关的内容就说完了，知其然更要知其所以然，清除float的方式繁多无比，掌握其中原理才能不人云亦云。当然抛砖引玉，更多的是共同学习共同进步,更多请移步博客。

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

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

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

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

摘要：父元素的顶端会限制浮动元素防止一直浮动到页面顶端。例子戳这里清除浮动清除浮动的目的是为了解决高度塌陷的问题撑开浮动父元素。原理会在元素的之上增加一个清除区域这个区域会在元素的上增加额外间隔并且不允许浮动元素进入这个区域。浮动概念浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所...

andong777 2019-08-29 10:57 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

Tonny 2019-08-29 12:23 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

cyqian 2019-08-01 16:39 评论0 收藏0
BFC--margin折叠和清除浮动

摘要：背景以前在写和的时候，两个都设置了不同的上下值。它是决定块盒子的布局及浮动元素相互影响的一个因素。创建根元素绝对定位元素为或的值不为的值为的值不为折叠属于同一个的两个相邻的会发生折那如何阻止折叠呢，只要将其中一个创建新的就行了。背景以前在写html和css的时候，两个div都设置了margin不同的上下值。写完后我开心的打开页面，为毛两个应该隔的比较开的div，距离并不是我设置的m...

zhangfaliang 2019-08-30 13:09 评论0 收藏0