精选文章 CSS基础之BFC布局

CSS基础之BFC布局

作者:leelxp 时间: 2020-07-27 03:35:22
leelxp 2020-07-27 03:35:22

CSS布局中BFC是面试中常被问到的问题,那么我们就来总结一下的相关知识点。

BFC的全名叫block formatting context, 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。没看懂什么意思。应该是这样:

  • BFC的布局是一个独立的布局,和BFC之外的布局是互不印象的;
  • BFC布局是可以通过一些条件触发的,从而实现布局上的需求或解决一些问题;
  • BFC其实就是一个工具,理解功能和特性就OK。

BFC触发的条件?

  • 根元素()
  • float值非none
  • overflow值非visible
  • display值为inline-block、table-cell、table-caption、flex、inline-flex
  • position值为absolute、fixed

BFC的特点是什么?

1、属于同一个BFC的两个相邻容器的上下margin会重叠



	
		
		
        
	
	
        

功能:可解释为何相邻两容器上下外边距会发生重叠

CSS基础之BFC布局1

当给红色块下外边距margin-bottom,给蓝色块上外边距margin-top时,上下外边距会发生重叠,两个色块的间距解析为两者中的较大值(60px)。 

原因:
此时红色块和蓝色块属于同一个BFC,即根元素()。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”,故两者上下边距发生重叠。

解决方法:给蓝色块添加父元素.box并添加声明overflow: hidden;可以解决红色块和蓝色块的上下margin重叠问题。CSS基础之BFC布局2

原因:
通过给蓝色块添加父元素.box并添加声明overflow: hidden;,使得父元素.box触发了BFC(见BFC触发条件3),此时红色块和蓝色块属于不同的BFC,红色块的BFC仍然是根元素(),蓝色块的BFC是父元素.box。即不满足BFC特性1中的规定“属于同一个BFC······”,从而解决了两者的上下margin重叠问题。

注:overflow: hidden;只是触发BFC众多条件中的一个,使用其他条件也能解决此问题,注意触发条件可能造成的其他影响即可,如浮动会造成的脱离文档流等。

2、计算BFC高度时浮动元素也参于计算



	
		
		
        
	
	
        

功能:可解释为何overflow: hidden;能解决父元素高度塌陷CSS基础之BFC布局3

当父元素.outside没有设置高度且子元素.inside都浮动时,父元素.outside会出现高度塌陷。

原因:
子元素.inside设置浮动后脱离文档流,而父元素.outside又没有设置高度,故父元素.outside会出现高度塌陷。

解决方法:给父元素.outside添加声明overflow: hidden;,父元素高度塌陷消失。



	
		
		
        
	
	
        

CSS基础之BFC布局4

原因:
给父元素.outside添加声明overflow: hidden;,使得父元素.outside触发了BFC(见BFC触发条件3),而BFC特性规定“计算BFC高度时浮动元素也参于计算”,此时子元素.inside虽然设置了浮动,但其高度仍计算至父元素内,从而解决了高度塌陷问题。

3、BFC的区域不会与浮动容器发生重叠



	
		
		
        
	
	
        

功能:在布局上实现自适应两栏(三栏)

CSS基础之BFC布局5

正常情况下,左侧元素.left浮动时,会与右侧元素.right发生重叠,不能实现自适应两栏效果。

原因:
左侧元素浮动,脱离文档流。

解决方法:给右侧元素.right添加声明overflow: hidden;,左右侧元素重叠消失,实现自适应两栏效果。



	
		
		
        
	
	
        

CSS基础之BFC布局6

原因:
给右侧元素.right添加声明overflow: hidden;,使得右侧元素触发了BFC(见BFC触发条件3),而BFC特性规定“BFC的区域不会与浮动容器发生重叠”,从而解决了重叠问题,实现自适应两栏效果。

4、BFC内的容器在垂直方向依次排列

类似正常情况下块元素在垂直方向上依次排列,较易理解。CSS基础之BFC布局7

5、元素的margin-left与其包含块的border-left相接触

CSS基础之BFC布局8

6、BFC是独立容器,容器内部元素不会影响容器外部元素

BFC大致就这么多内容,面试前必读。

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:EOS错失DeFi首班车

下一篇:百度地图鼠标经过划线并输出经纬度

您可能感兴趣

  • GitHub 上值得收藏的 100 个精选前端项目!

    点击上方“逆锋起笔”,公众号回复 PDF 领取大佬们推荐的学习资料 来 源:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有。 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些前端大神的作品,也有很多令人惊艳的前端效...

  • 2020年最新web全栈精英课程

    目录: ┣━━阶段01 复习准备:核心技术复习、ES5、ES6、TypeScript、PHP+MySQL开发 ┃ ┣━━01-01 核心技术复习:CSS3矩阵、CSS3实用技巧、ES5核心复习、jQuery源码 ┃ ┣━━01-02 Linux:虚拟机系列安装、常用命令、Cygwin、服务器原理 ┃ ┣━━01-03 复习ES5.1:严格模式、JSON、对象、js作用域和闭包、参数传递 ┃ ...

  • 实现微前端,你需要了解的 Vue Genesis 渲染器

    来源 | https://www.cnblogs.com/coderhf/archive/2020/06/10/13086341.html 我们的需求 核心的就是渲染器,它提供了最基础渲染能力,有了它,你可以实现微前端、微服务、远程组件、首屏渲染,甚至可以和 react、Ejs 等配合使用。 它可以和怎样的你协作? 如果你是传统的后端渲染的,需要做seo,但是你希望在部分布局,部分页面引入 ...

  • 李智慧 - 架构师训练营 第四周

    互联网系统面临怎样的挑战? 大型互联网系统一般有如下特点: 用户多,分布广:全球用户服务;用户分布范围广,网络情况复杂 高并发,大流量 高可用:系统7x24小时不间断服务 海量数据:存储、管理海量数据 安全环境恶劣,易受网络攻击 需求变更快,频繁发布,每周甚至每天数次发布 从小到大,渐进式发展  应对高并发挑战的两个技术方向 垂直伸缩 通过升级硬件和网络吞吐能力可以实现垂直伸缩,无需改变应...

  • DAY01

    今日学习目标 1.web基础知识 2.HTML快速入门 3.常用标记 一 web基础知识 1.web 即各类网站 作用:把各种信息和服务进行无缝连接,提供生动形象的用户界面 2.web的工作原理 在互联网环境之上基于浏览器和服务器以及通信协议来实现信息的传输和展示 通信协议:HTTP/HTTPS规范数据是如何打包和传递 浏览器: 浏览器产品:IE,chrome,opera,safari,fi...

  • 前端介绍之ES6 语法指南

    ES6 语法指南 后端项目搭建完毕,接下来就是前端页面了。不过在这之前需要一些准备工作。我们需要学习ES6的语法标准。 什么是ES6?就是ECMAScript第6版标准。 4.1.什么是ECMAScript? 来看下前端的发展历程: web1.0时代: 最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 web2...

  • 渗透测试 QA 收集

    目录 1、拿到一个待检测的站,你觉得应该先做什么? 2、判断出网站的CMS对渗透有什么意义? 3.一个成熟并且相对安全的CMS,渗透时扫目录的意义? 4.常见的网站服务器容器。 5.mysql注入点,用工具对目标站直接写入一句话,需要哪些条件? 6.目前已知哪些版本的容器有解析漏洞,具体举例。 7.如何手工快速判断目标站是windows还是linux服务器? 8.为何一个mysql数据库的站...

  • 干货 | 携程度假无线前端架构演进之路

    作者简介 Jade Gu,携程高级前端开发专家,负责度假前端框架设计和 Node.js 基础设施建设等工作。 这篇文章将简略地介绍我们当前的无线前端架构设计及其演进之路。主要内容包含以下几个部分,希望我们的经验能带给大家一些启发。 1)当前的前端方案及其解决的问题 2)现在面对的新挑战 3)我们的前端方案设计和选择。 一、当前的前端方案及其解决的问题 1.1 当前方案的技术背景 将时间调回到...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。