在前端开发中，CSS 布局常常隐藏着一些看似复杂却又极其重要的概念，而块级格式化上下文（BFC）就是其中之一。它就像是 CSS 布局的“幕后英雄”，虽然不常被提及，但却在解决诸多布局问题时发挥着关键作用。本文将带你深入了解 BFC 的原理、特性以及实际应用场景，帮助你更好地掌握 CSS 布局。

一、什么是 BFC？

引言

在现代Web开发中，实现页面在不同设备和屏幕尺寸上的完美展示是一个永恒的话题。随着各种终端设备的涌现，从传统的PC到移动设备，再到如今流行的大屏数据可视化，前端开发者需要掌握多种自适应布局方案。本文将深入探讨三种主流的前端自适应解决方案：vw/vh、rem+vw/vh和scale，分析它们的核心原理、

技术背景

在前端开发中，经常会遇到需要让某个div元素填充屏幕剩余高度的需求，比如创建具有固定头部和底部，中间内容区域自适应填充剩余空间的布局。随着CSS技术的发展，有多种方法可以实现这一需求。

当第一缕阳光漫过窗台，泡一杯温热的咖啡，坐在桌前享受这独属于自己的静谧时光。前端的小伙伴们，每天面对复杂的项目需求和紧张的面试压力，是不是偶尔也会感到疲惫？别担心，从今天起，让我们抓住清晨和上午这段黄金时间，用一道 CSS 高频面试题，开启元气满满的学习之旅，在知识的海洋里放松身心，稳步提升自己。

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；

举个例子：

其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

当然该元素高度上的百分比是相对其父元素高度的百分比的，min-height及max-height也适用这条规律。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

在这篇文章中我们将学习关于自适应图片：一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片，并且看看HTML提供了什么工具来帮助实现它们。自适应图片仅仅只是自适应网站设计的一部分，为您奠定了自适应网页设计的良好基础。

作者有话要说：此文是作者自己的学习总结，供大家参考，不足之处还请见谅和指正~

在学习完了基本的HTML+CSS标签之后，就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的，值得反复体会和思考！

网页结构

1. 实现两栏布局的方式你知道那些方法? (其实就是我们经常在开发中使用到的 '左边宽度固定右边宽度自适应' )

那我们应该如何回答呢？