清楚浮动/边界塌陷bfc

2019-07-14 admin

CSS清浮动处理(Clear与BFC) 在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼

1 浮动带来布局的便利,却也带来了新问题

复制代码 1 <!doctype html> 2 <html lang=“en”> 3 <head> 4 <meta charset=“UTF-8”> 5 <title>Clear float</title> 6 <style type=“text/css”> 7 .container{ 8 margin: 30px auto; 9 width:600px; 10 height: 300px; 11 } 12 .p{ 13 border:solid 3px #a33; 14 } 15 .c{ 16 width: 100px; 17 height: 100px; 18 background-color: #060; 19 margin: 10px; 20 float: left; 21 } 22 </style> 23 </head> 24 <body> 25 <div class=“container”> 26 <div class=“p”> 27 <div class=“c”></div> 28 <div class=“c”></div> 29 <div class=“c”></div> 30 </div> 31 </div> 32 </body> 33 </html> 复制代码 我们希望看到的效果是这样的

但结果却是这样的

父容器并没有把浮动的子元素包围起来,俗称塌陷,为了消除这种现象,我们需要一些清除浮动的技巧。

2 如何清理浮动

清理浮动一般有两种思路

利用 clear属性,清除浮动 使父容器形成BFC 分别看一下

2.1 利用 clear属性,清除浮动

clear属性是个什么东东呢?clear 属性规定元素的哪一侧不允许其它之前浮动元素,修改一下刚才代码

复制代码 <div class=“p”>

<div class="c"></div>
<div class="c" style="clear:left;"></div>
<div class="c"></div>

</div> 复制代码

第二个div添加了clear:both属性后,其左侧的div(第一个div)不再浮动,所以后面的div都还行(huan hang)了。我们可以利用这点儿在父容器的最后添加一个空的div,设置属性clear:left,这样就可以达到我们目的了。

2.1.1 添加空div清理浮动

对我们刚才代码稍作修改

复制代码 <div class=“p”>

<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div style="clear:left;"></div>

</div> 复制代码 也就是在父容器最后添加

<div style=“clear:left;”></div> 看看效果

果真好使了,有些同学看了后可能感觉奇怪,为什么想上一个例子修改第二个div

<div class=“c” style=“clear:left;”></div> 没有变成这样的效果

说一下自己的拙见,clear:left属性只是消除其左侧div浮动对它自己造成的影响,而不会改变左侧div甚至于父容器的表现,在父容器看来,三个div还都是float的,所以高度依旧塌陷。但是我们在最后添加了一个非浮动的div,由于它有clear:left属性,所以它会按照左侧div不浮动来定位自己,也就是定位到下一行,而父容器看到有一个非浮动、普通流的子元素元素,会将其包围,这样造成了顺便也把三个浮动元素也包裹起来的效果,高度不再塌陷(不知道说明白没有或者这种理解对不对,还望明白的同学指点)。

当然除了添加div,还可以添加br等其它html元素,原理相同,不再赘述。

2.1.2 使用CSS插入元素

上面的做法浏览器兼容性不错,但是有个很大的问题就是向页面添加了内容来达到改变效果的目的,也就是数据和表现混淆,既然是变现,看看怎么使用CSS来解决这一问题。根本的做法还是向父容器最后追加元素,但我们可以利用CSS的:after伪元素来做此事。

添加一个类 floatfix

复制代码 .floatfix:after{

content:"."; 
display:block; 
height:0; 
visibility:hidden; 
clear:left;

} 复制代码 对父容器添加此类

<div class=“p floatfix”>

<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>

</div> 这样我们就可以看到正确效果了

简单解释一下,对父容器添加floatfix类后,会为其追加一个不可见的块元素,然后设置其clear属性为left,和刚才原理类似。

2.1.3 大师手笔

Nicolas Gallagher 在A new micro clearfix hack中提供了一种看起来更清爽的做法

.floatfix:after{

content:"";
display:table;
clear:both;

} Nicolas Gallagher原文中还有:before是为了处理margin边距重叠,本文中没有列出来。

有同学会提出来了上面方法看起来不错,但是IE6、7不支持伪元素怎们办?这就需要我们使用BFC/haslayout的姿势了

2.2 使父容器形成BFC

经过了前些日子园里关于BFC的狂轰滥炸相信大家都对BFC有了一定的了解,不过瘾的同学可以看看 Block Format Content,BFC有三个特性

BFC会阻止垂直外边距(margin-top、margin-bottom)折叠 按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠。

因此要解决margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

BFC不会重叠浮动元素 BFC可以包含浮动 我们可以利用BFC的第三条特性来“清浮动”,这里其实说清浮动已经不再合适,应该说包含浮动。也就是说只要父容器形成BFC就可以,简单看看如何形成BFC

float为 left|right overflow为 hidden|auto|scroll display为 table-cell|table-caption|inline-block position为 absolute|fixed 我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

2.2.1 利用float来使父容器形成BFC

简单修改一下代码

<div class=“p” style=“float:left;”>

<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>

</div> 这样我们可以得到结果

我们可以看到父容器高度没有塌陷,但是长度变短了,因为div应用float‘后会根据内容来改变长度,这个在很多时候很有用,但是我们不希望有这种效果怎么办?

2.2.2 使用BFC的其它局限

上面提到使用BFC使用float的时候会使父容器长度缩短,而且还有个重要缺陷——父容器float解决了其塌陷问题,那么父容器的父容器怎么办?难道要全部使用folat吗(确实有这种布局方式倒是)。BFC的几种方式都有各自的问题,overflow属性会影响滚动条和绝对定位的元素;position会改变元素的定位方式,这是我们不希望的,display这几种方式依然没有解决低版本IE问题。。。

看起来还是第一种方式比较好,可是低版本IE该怎么办呢?

2.2.3 hasLayout

我们知道在IE6、7内有个hasLayout的概念,很多bug正式由hasLayout导致的,当元素的hasLayout属性值为false的时候,元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果,元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动,先看看怎么使元素hasLayout为true

position: absolute float: left|right display: inline-block width: 除 “auto” 外的任意值 height: 除 “auto” 外的任意值 zoom: 除 “normal” 外的任意值 writing-mode: tb-rl 在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true

3 一个相对靠谱的解决方案

经过上面的比较我们可以得出一个相对靠谱的解决方案

在IE+、现代浏览器上使用伪元素 在IE6、7使用hasLayout 具体应该使用哪种方式来使元素hasLayout为true呢?相对而言zoom:1比较好,因为不会造成其它影响。想造成只在IE6、7上使用某些CSS的效果,我们还得需要一些CSS hack的知识,感兴趣同学可以看看 CSS hack,我们可以写出这样的CSS

复制代码 .floatfix{

*zoom:1;

} .floatfix:after{

content:"";
display:table;
clear:both;

} 复制代码 4 最后

虽然我们得出了一种浏览器兼容的靠谱解决方案,但这并不代表我们一定得用这种方式,很多时候我们的父容器本身需要position:absolute等形成了BFC的时候我们可以直接利用这些属性了,大家要掌握原理,活学活用。总而言之清理浮动两种方式

利用 clear属性,清除浮动 使父容器形成BFC

[转载]原文链接:https://segmentfault.com/a/1190000019754357

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69687.html

文章标题:清楚浮动/边界塌陷bfc

相关文章
讲清楚之 javascript 变量对象
变量对象 这一节聊一下变量对象。都是干货(^▽^) 变量对象是函数运行时数据的集合,存储了在上下文中定义的变量和函数,不同的函数的变量对象稍有不同。 还是从上下文说起,javascript 引擎执行到函数的时候会向上下文栈中压入一个上下文。...
2018-05-29
看清楚真正的 Webpack 插件
什么是 webpack? webpack 能干什么? webpack 怎么用? 太多的入门教程了,一搜一大把,不再说了,而且 webpack 的官方文档应该是文档届的标杆了,太详细了,由浅入深,从玩具类型的初级 Level,到深度优化的生产...
2018-01-07
深入清除浮动原理
设置为浮动的元素会脱离当前文档流,向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。 浮动是把双刃剑,在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示: &lt;!-- ...
2018-05-16
讲清楚之 javascript 参数传值
参数传值是指函数调用时,给函数传递配置或运行参数的行为,包括通过call、apply 进行传值。 在实际开发中,我们总结javascript参数传值分为基本数据类型按值传递(String、Numbe、Boolean、Null、undefin...
2018-05-30
BFC理解
Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置 使用新的元素构建BFC overflow:hidden | auto | scroll; 只要不为...
2018-06-07
前端BFC布局学习
BFC,全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局,会产生一定的效果。 Block Formatting Contexts翻译为:块级元素格式化上下文。它决定了块级元素如何对它...
2018-07-16
地图小区景点边界轮廓实现
经常的我们在使用地图功能时,会发现在选择一个小区或者一个热门景点的时候,地图上面会给出其边界轮廓,能够方便我们知道其范围大小,有时候在我们使用地图组件的时候,也会面临着类似的需求。比如在地图上面标识出一个商场范围内的热力图,一个热门景点的...
2018-09-27
CSS浮动的特性
浮动具有以下特性: 盖不住的文本 浮动元素后面不是块级元素,后面的元素将会和它并排(除非设置了元素的宽度,并且屏幕放不下时将不会换行) 浮动元素的上一个元素如果没有浮动,浮动只在当前行浮动;当浮动遇到浮动,它们将在一行排序,除非没有位置了...
2018-06-02
边距重叠以及解决方案BFC
统一的解决方案;设置padding或者border或者触发BFC 边距重叠有一下三种情况: 首先把所有的margin格式清空 &lt;head&gt; &lt;title&gt;边距重叠&lt;&#x2F;title&gt; &l...
2018-02-08
从错误边界到回滚到MWI
React 16早期版本公开的三大特征之一,错误边界,简单来说,就是存在两种组件:错误组件与边界组件。 错误组件就是发生错误的组件,即使它本身就有componentDidCatch,这钩子也不会被唤起,这情况就像理发师不能给自己理发一样(本...
2018-05-07
回到顶部