1. 简介

1.1 什么是CSS布局？

what's BFC?

第一次看到这个名词，我是拒绝的，css什么时候还有这个东西？于是迫不及待的google了一下，才发现原来它无时无刻不在我们的css当中，只不过它并不是一个属性，不需要我们平常使用手写罢了。但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局。 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

现在的企业网站制作前端都是div+css布局。 TABLE布局是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的企业网站制作都是用DIV+CSS布局。

什么是DIV？
　　DIV是层叠样式表中的定位技术，全称DIVision或叫做划分。在网站制作中DIV元素一般是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。当使用DIV+CSS布局的时候， 主要把它当做盒子然后把需要的文字，图像等内容放在DIV标签之中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”，或者直接就叫一段在 DIV 中的 HTML。

CSS 布局是指使用 CSS 来控制页面元素在页面上的位置和排列。CSS 提供了多种布局方式，可以满足不同的需求。

传统布局方式

1 简介

上一篇文章，介绍了魔鬼属性——浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局使用户精准定位页面中的任意元素成为可能。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。

当我们刚开始学习Web前端时，就对HTML页面的布局特别感兴趣，上一讲《CSS初步介绍》中，讲解了CSS的入门知识，现在我们介绍一下HTML布局的知识。

HTML布局的方案有Table布局、最流行的DIV布局、以及HTML5建议的DIV布局的替代方案。

当HTML内容被浏览器显示时，整个HTML页面对使用者来说，就是一个显示信息与进行操作的界面。我们常常见到和下面类似的界面：

提示：点击上方"蓝色字体"↑ 可以订阅噢！

摘要 51RGB官方微信

小技巧知识整合，小白们的福利

设置元素的现实方式

display：block

默认宽度为父级元素宽度

可设置宽高

换行显示

还在为网页排版抓狂？别担心，CSS的 flex 布局来了，让你轻松玩转各种页面布局，实现网页设计自由！

什么是Flex 布局？

Flex 布局，也称为弹性布局，是 CSS 中的一种强大布局方式，它能够让你的网页元素像弹簧一样，灵活地适应各种屏幕尺寸和设备方向。

想象一下:

在网页开发中，布局始终是最基础也是最关键的环节。随着 CSS3 的普及，Flexbox（弹性盒）布局系统彻底改变了我们构建网页的方式。本文将深入解析这种现代布局方案，帮助你轻松应对各种布局需求。

一、传统布局的局限性

在 CSS3 之前，我们主要依赖以下方式实现布局：