清除float对文档流影响的两种方式分析

starsfun 发布于2019-08-28 18:10 / 3551人阅读

摘要：对文档流的影响在元素之后的元素会被填充到没有被元素占用的中。我们就需要对进行清除。使用清除的影响可以在元素的父元素中设置。在这个之后的不在这个里，所以不受的影响，即从视觉上消除了的影响。

float对文档流的影响

在float元素之后的元素会被填充到没有被float元素占用的normal flow中。如果float元素没有占满整行并且接下来的元素可以被填充在float元素周围，则它会被填充到float元素周围。这时，如果我们希望在float元素之后的元素不受float元素的影响，依然像普通块状元素一样，新起一行。我们就需要对float进行清除。

使用clear清除float的影响

clear可以应用在float元素之后的元素中对float的影响进行清除。

在使用clear:both后，该元素将处在所属的block formatting context中所有float元素的下面。如果我们只是想取消该元素上面或者相邻的元素的float的影响，使用clear无法满足我们的需求。

使用overflow清除float的影响

可以在float元素的父元素中设置overflow:hidden|auto|scroll。这时只要把想另起一行的element放在float元素的父元素的下方即可。

为什么overflow也可以取消float?

其实overflow并不是清除了float，而是新建了BFC。BFC类似于编程语言中的作用域，作用域变了，float也就影响不到了。只有clear可以取消float的影响。

如果一个box中只有float元素，那么它是没有高度的。这时该box会塌陷成一条线。这是因为box在计算高度时，会先从normal flow中抽离float元素。该box无法得到height。这时设置该box的overflow属性（除visible皆可）可以让该box扩张成float元素的height。

当一个box的overflow属性不是visible时，它会新创建一个block formatting context。在这个box之后的element不在这个BFC里，所以不受float的影响，即从视觉上消除了float的影响。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/float#Specifications
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formattin...
http://www.w3.org/TR/CSS21/visuren.html
https://css-tricks.com/all-about-floats/

GPU云服务器云服务器域名解析的两种主要方式为 json的两种结构】数据统计的两种方法最优生成树的两种算法

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

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

[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

YorkChen 2019-08-01 17:39 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

_Dreams 2019-08-29 13:29 评论0 收藏0
CSS布局说——可能是最全的

摘要：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。这些相对于布局来说是基础的，同时也是非常重要的。可以看到，浮动元素，其实对于布局来说，是特别危险的。前言现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思...

hearaway 2019-08-30 15:53 评论0 收藏0
css布局基础总结

摘要：想写出高效合理的布局，必须以深厚的基础为前提。现在布局方式主要分为三种传统布局方案等配合。弹性布局，实现方便，兼容性较好。在环境中的元素按照如下规则渲染和文档流一样，元素按照自己类型的布局特性从左到右，从上往下依次排列。前端css布局知识繁杂，实现方式多种多样。想写出高效、合理的布局，必须以深厚的css基础为前提。为了方便记忆和复习，将css布局要点记录如下。内容较多，应用方面说的不...

PrototypeZ 2019-08-30 15:54 评论0 收藏0