内容简介:哈喽,各位小伙伴好!今天来整理下前端关于css布局的一个知识点 - BFC(Block fomatting context),如果知识点梳理有出错的地方,望伙伴们帮忙指出,一起进步~BFC 可以理解为建立一个布局容器,容器里按自己的方式来布局,且与容器外界的元素互不影响。如图所示,这样我们就通过float 来使得 .fl 元素生成一个 BFC 容器,也可以看到:
哈喽,各位小伙伴好!今天来整理下前端关于css布局的一个知识点 - BFC(Block fomatting context),如果知识点梳理有出错的地方,望伙伴们帮忙指出,一起进步~
一、什么是 BFC
BFC 可以理解为建立一个布局容器,容器里按自己的方式来布局,且与容器外界的元素互不影响。
二、BFC 特性
- 1.BFC里的布局跟常规流里的一样,例如盒子会在垂直方向排列。
- 2.属于同一个BFC里的盒子会产生margin重叠。
- 3.容器内元素的margin的左边,会与容器的border左边相接触。
- 4.BFC容器不会与float元素发生重叠。
- 5.BFC内的元素不会影响到外部的元素。
- 6.BFC容器计算高度时,内部float元素也参与。
三、怎么产生 BFC
- 根元素
- float不为none的浮动元素。
- 绝对定位元素。(position: fixed; 或 position:absolute;)
- overflow值不为visible的元素。
- display:flex; 、 display:inlie-block; 、 display: table-cell; 等。
四、实例
- 1.产生一个 BFC 容器。
<!-- 1.产生一个 BFC 容器 --> <style> .wrap { background-color: #ccc; } .fl { float: left; background-color: yellow; } .fl>div { border:1px solid #333; } </style> <div class="wrap"> <div class="fl"> <div class="div">这是div - 1</div> <div class="div">这是div - 2</div> </div> 产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器 </div> 复制代码
如图所示,这样我们就通过float 来使得 .fl 元素生成一个 BFC 容器,也可以看到:
1.容器里的div元素也是垂直排列。(对应上面介绍的特性1 - BFC里的布局跟常规流里的一样,例如盒子会在垂直方向排列)。
2.容器里的 div 元素只会撑满整个BFC容器,并不会对容器外产生影响。(对应上面介绍的特性5 - BFC内的元素不会影响到外部的元素。)
- 2.产生margin重叠
<!-- 产生 margin 重叠 --> <style> .p1 { margin:10px 0; background-color: #ccc; } .p2 { margin:10px 0; background-color: #eee; } </style> <div class="p1">这是文本1111111111111111</div> <div class="p2">这是文本2222222222222222</div> 复制代码
从图中可以看到 .p2 的margin-top和 .p1 的margin-bottom 重叠在一起了,使得他们中间的间距只有10px而不是20px。(对应上面介绍的特性2 - 属于同一个BFC里的盒子会产生margin重叠)。 因为跟元素本身也是一个BFC。 解决方法是,创建一个BFC容器:(一个元素只能受一个BFC容器影响,当元素自己也成为BFC时,就不收根元素影响了)
<!-- 解决产生 margin 重叠 --> <style> .p1 { margin:10px 0; background-color: #ccc; } .wrap { overflow:hidden; } .p2 { margin:10px 0; background-color: #eee; } </style> <div class="p1">这是文本1111111111111111</div> <div class="wrap"> <div class="p2">这是文本2222222222222222</div> </div> 复制代码
- 3.利用BFC进行左右布局
<!-- 利用 BFC进行左右布局 --> <style> .wrap { } .fl { float: left; width: 120px; background-color: #eee; height: 300px; } .main { background-color: #ccc; height: 400px; overflow:hidden; } </style> <div class="wrap"> <div class="fl">左边</div> <div class="main">主体内容主体内容主体内容主体内容主体内容主体内容</div> </div> 复制代码
(对应上面介绍的特性4 - BFC容器不会与float元素发生重叠)
- 解决浮动元素造成父元素高度出错
当有子元素浮动时,父元素在计算高度时没有把浮动元素的高度算进去,所以看到了 .fl 元素超出了父元素。将父元素设成BFC可解决这个问题(对应上面介绍的特性6 - BFC容器计算高度时,内部float元素也参与)
<!-- 解决浮动元素造成的父元素高度出错 --> <style> .wrap { background-color: #eee; overflow:hidden; } .fl { float: left; background-color: #ccc; height: 100px; } .con { height: 30px; } </style> <div class="wrap"> <div class="fl">高度为100px的浮动元素</div> <div class="con">这是文本这是文本这是文本这是文本这是文本</div> </div> 复制代码
以上就是我整理的一些关于BFC的知识点和一些应用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端面试之居中布局
- 前端布局方式汇总及概念浅析
- 「前端那些事儿」③ CSS 布局方案
- 前端基本功-响应式布局(flex)
- 前端菜鸟笔记 Day-4 CSS布局
- 「前端面试题系列2」如何实现一个圣杯布局?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ASP.NET 2.0技术内幕
埃斯帕斯托 / 施平安 / 清华大学出版社 / 2006-8 / 68.00元
《ASP.NET2.0技术内幕》围绕着ASP.NET 2.0是Web开发的重要分水岭这一主题,采用自顶向下的方式介绍ASP.NET 2.0的最新编程实践,从更广泛的特征到具体的实现和编程细节,充分展示了ASP.NET的最新编程实践。全书共15章,主题涉及HTTP运行库、安全性、缓存、状态管理、控件、数据绑定和数据访问。 《ASP.NET2.0技术内幕》主题丰富,讲解透彻,包含大量实例,是......一起来看看 《ASP.NET 2.0技术内幕》 这本书的介绍吧!