前端面试汇总

通用问题

在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？

在制作一个网页应用或网站的过程中，我会考虑以下几个方面：

1. UI设计：我会根据网站或应用的定位和目标用户来设计UI，使其简洁、易用、美观、符合用户习惯，并且能够提高用户体验。
2. 安全性：我会考虑如何保护用户的隐私和数据安全，采用安全的编程技术和框架，防止SQL注入、XSS攻击等安全问题。
3. 高性能：我会优化网站或应用的性能，减少页面加载时间，提高响应速度，采用缓存技术、CDN加速等手段来提高性能。
4. SEO：我会考虑如何优化网站或应用的SEO，采用合适的关键词、网站结构、页面标题、描述等手段来提高搜索引擎排名。
5. 可维护性：我会采用模块化、可重用的代码设计，注重代码的可读性和可维护性，使得代码易于维护和扩展。
6. 技术因素：我会根据项目需求和技术选型来选择合适的技术栈，如前端框架、后端语言、数据库等，以及采用最新的技术和工具来提高开发效率和质量。

假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?

整合五个不同的样式文件最好的方式是将它们合并成一个单独的样式文件，以减少页面加载时间和HTTP请求次数。可以使用CSS预处理器如Sass或Less来管理和组织样式文件，以便更好地维护和扩展。另外，可以使用压缩工具如CSSMin或YUI Compressor来压缩样式文件，以减小文件大小，提高页面加载速度。

你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?

渐进增强是指在设计和开发网站或应用时，先考虑基本功能和核心内容，然后逐步添加更高级的功能和特性，以适应不同的设备和浏览器。这种方法强调的是向前兼容性，即确保网站或应用在旧版浏览器上也能正常运行，同时提供更好的用户体验和更多的功能。

优雅降级则是指在设计和开发网站或应用时，先考虑高级功能和特性，然后逐步降低要求，以适应旧版浏览器和设备。这种方法强调的是向后兼容性，即确保网站或应用在旧版浏览器上也能正常运行，但可能会牺牲一些高级功能和用户体验。

总的来说，渐进增强和优雅降级都是为了提高网站或应用的兼容性和用户体验，但它们的思路和方法不同。渐进增强更注重向前兼容性和逐步增强功能，而优雅降级更注重向后兼容性和逐步降低要求。

你如何对网站的文件和资源进行优化？

对网站的文件和资源进行优化可以从以下几个方面入手：

1. 压缩文件：可以使用压缩工具如Gzip来压缩HTML、CSS、JavaScript等文件，以减小文件大小，提高页面加载速度。
2. 合并文件：可以将多个CSS或JavaScript文件合并成一个单独的文件，以减少HTTP请求次数，提高页面加载速度。
3. 使用CDN：可以使用CDN（内容分发网络）来加速静态资源的加载，如图片、CSS、JavaScript等文件，以提高页面加载速度。
4. 图片优化：可以使用图片压缩工具如TinyPNG来压缩图片大小，以减小文件大小，提高页面加载速度。
5. 延迟加载：可以将页面中不必要的资源延迟加载，如图片、视频等，以减少页面加载时间，提高用户体验。
6. 缓存控制：可以使用缓存控制技术如ETag、Expires、Cache-Control等来控制浏览器缓存，以减少HTTP请求次数，提高页面加载速度。
7. 代码优化：可以优化HTML、CSS、JavaScript等代码，如删除不必要的空格、注释、重复代码等，以减小文件大小，提高页面加载速度。
8. DNS预解析：可以使用DNS预解析技术来预先解析页面中的域名，以减少DNS查询时间，提高页面加载速度。

综上所述，对网站的文件和资源进行优化可以提高页面加载速度和用户体验，同时减少服务器负载和带宽消耗。

浏览器同一时间可以从一个域名下载多少资源？有什么例外吗？

浏览器同一时间可以从一个域名下载的资源数量是有限制的，这个限制通常被称为“并发请求限制”。不同的浏览器对于并发请求限制的数量有不同的限制，但通常情况下，现代浏览器可以同时从一个域名下载6-8个资源。这个限制是为了避免过多的HTTP请求导致服务器负载过高，同时也可以提高页面加载速度和用户体验。为了避免并发请求限制，可以使用CDN（内容分发网络）来加速静态资源的加载，或者将资源分散到多个域名下，以提高并发请求的数量。

有一些例外情况可以突破浏览器的并发请求限制，例如使用HTTP/2协议、使用不同的子域名或使用不同的协议（如HTTP和HTTPS）。HTTP/2协议支持多路复用，可以在同一连接上同时传输多个请求和响应，从而避免了并发请求限制。使用不同的子域名可以将资源分散到多个域名下，从而提高并发请求的数量。使用不同的协议可以避免浏览器对同一域名下HTTP请求的并发限制，例如将静态资源放在HTTPS协议下，将动态资源放在HTTP协议下。但是，这些方法也会增加服务器的负担和复杂度，需要根据具体情况进行权衡和选择。

请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

1. 压缩和合并文件：将多个CSS和JavaScript文件压缩成一个文件，可以减少HTTP请求次数，从而减少页面加载时间。
2. 图片优化：使用适当的图片格式和大小，可以减少图片的加载时间。例如，使用JPEG格式的图片可以减少文件大小，从而减少加载时间。
3. 使用CDN：使用内容分发网络（CDN）可以将静态资源（如CSS、JavaScript和图片）缓存在全球各地的服务器上，从而加快页面加载速度。

如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？

如果我喜欢使用空格来缩进代码，但是项目中使用 Tab，我会先和团队成员沟通，看看是否可以统一使用空格或者 Tab。如果团队成员不同意改变，我会尊重团队的决定，继续使用 Tab 来缩进代码。

如果我认为使用空格更加方便和清晰，我会在自己的编辑器中设置将 Tab 转换成空格，这样就可以在自己的编辑器中使用空格来缩进代码了。但是在提交代码时，我会将空格转换成 Tab，以符合团队的规范。

请谈谈你对网页标准和标准制定机构重要性的理解。

网页标准是指由W3C（万维网联盟）制定的一系列规范，包括HTML、CSS、JavaScript等。这些规范定义了网页的结构、样式和行为，使得不同的浏览器可以正确地解析和渲染网页。标准制定机构的重要性在于确保网页的兼容性和可访问性，使得网页可以在不同的设备和浏览器上正确地显示和使用。如果没有标准制定机构，每个浏览器都可以自行解析和渲染网页，导致网页在不同的浏览器上显示不一致，甚至无法正常使用。标准制定机构还可以推动技术的发展和创新，使得网页可以更加丰富和交互。因此，遵循网页标准和支持标准制定机构的工作是非常重要的。

什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？

FOUC（无样式内容闪烁）是指在页面加载时，由于CSS文件的加载延迟或者JavaScript操作DOM的延迟，导致页面上的内容在没有样式的情况下显示出来，然后突然闪烁一下，再显示出样式。这种现象会给用户带来不好的体验，因为页面的内容会突然变化，影响用户的阅读和操作。

为了避免FOUC，可以采取以下措施：

1. 将CSS文件放在页面头部：将CSS文件放在页面头部可以让浏览器在加载页面时先加载CSS文件，从而避免页面内容在没有样式的情况下显示出来。
2. 使用内联样式：将CSS样式直接写在HTML标签中，可以避免CSS文件的加载延迟。
3. 使用JavaScript延迟加载：使用JavaScript延迟加载可以让页面先加载完毕再加载CSS文件，从而避免FOUC。
4. 使用样式预加载：使用样式预加载可以让浏览器在加载页面时先加载CSS文件，从而避免FOUC。
5. 使用样式闪避：使用样式闪避可以让页面在没有样式的情况下隐藏内容，直到样式加载完毕再显示出来，从而避免FOUC。

请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。

ARIA（Accessible Rich Internet Applications）是一种用于增强网页可访问性的技术，它可以为那些无法使用鼠标或键盘的用户提供更好的访问体验。屏幕阅读器是一种软件，它可以将网页内容转换成语音或者盲文，以帮助视力障碍者访问网页。

为了使网站实现无障碍访问，可以采取以下措施：

1. 使用语义化的HTML：使用语义化的HTML可以让屏幕阅读器更好地理解网页内容，从而提高可访问性。
2. 使用ARIA属性：使用ARIA属性可以为那些无法使用鼠标或键盘的用户提供更好的访问体验，例如，使用ARIA属性可以让屏幕阅读器更好地理解网页中的表单和控件。
3. 提供文本替代品：为图片、音频和视频等媒体提供文本替代品可以让屏幕阅读器更好地理解网页内容，从而提高可访问性。
4. 使用高对比度的颜色：使用高对比度的颜色可以帮助视力障碍者更好地阅读网页内容。
5. 提供键盘快捷键：提供键盘快捷键可以让那些无法使用鼠标的用户更方便地访问网页内容。
6. 测试可访问性：定期测试网站的可访问性，以确保网站可以被所有用户访问。

请解释 CSS 动画和 JavaScript 动画的优缺点。

CSS 动画和 JavaScript 动画都可以用来实现网页动画效果，它们各有优缺点。

CSS 动画的优点是：

1. 简单易用：CSS 动画可以通过简单的 CSS 属性设置来实现，不需要编写复杂的 JavaScript 代码。
2. 性能好：CSS 动画是由浏览器自己处理的，因此可以更好地利用硬件加速，性能比 JavaScript 动画更好。
3. 兼容性好：CSS 动画可以在大多数现代浏览器中运行，而且不需要额外的插件或库。

CSS 动画的缺点是：

1. 功能受限：CSS 动画只能实现一些简单的动画效果，比如平移、旋转、缩放等，无法实现复杂的动画效果。
2. 控制不灵活：CSS 动画的控制比较有限，无法实现复杂的交互效果。

JavaScript 动画的优点是：

1. 功能强大：JavaScript 动画可以实现复杂的动画效果，比如路径动画、粒子动画等。
2. 控制灵活：JavaScript 动画可以通过编写 JavaScript 代码来实现复杂的交互效果，比如鼠标悬停、点击等。

JavaScript 动画的缺点是：

1. 编写复杂：JavaScript 动画需要编写复杂的 JavaScript 代码，对于不熟悉 JavaScript 的开发者来说比较困难。
2. 性能差：JavaScript 动画是由 JavaScript 引擎处理的，性能比 CSS 动画差，特别是在移动设备上。

综上所述，CSS 动画适合实现简单的动画效果，而 JavaScript 动画适合实现复杂的动画效果和交互效果。在实际开发中，可以根据具体需求选择使用哪种动画方式。

什么是跨域资源共享 (CORS)？它用于解决什么问题？

跨域资源共享（CORS）是一种机制，它允许在一个域名下的网页向另一个域名下的服务器请求资源，即跨域请求。CORS用于解决同源策略（Same-Origin Policy）所导致的跨域问题。

同源策略是浏览器的一种安全策略，它限制了一个域名下的网页只能访问同一域名下的资源，而不能访问其他域名下的资源。这种限制可以防止恶意网站窃取用户的信息，但也会导致一些正常的跨域请求无法完成。

CORS机制通过在服务器端设置响应头信息，告诉浏览器该服务器允许哪些域名下的网页进行跨域请求。当浏览器发起跨域请求时，会先向服务器发送一个预检请求（OPTIONS请求），服务器返回响应头信息，告诉浏览器是否允许跨域请求。如果允许，浏览器才会发送真正的跨域请求。

CORS机制可以使得网页在不同的域名下进行数据交互，从而实现更加丰富的功能和更好的用户体验。但需要注意的是，CORS机制并不能完全解决跨域问题，仍然存在一些安全风险，需要开发者在使用时注意安全性。

HTML相关问题

doctype(文档类型) 的作用是什么？

doctype（文档类型）是一种指示浏览器使用哪种 HTML 或 XHTML 规范来解析页面的声明。它告诉浏览器如何正确地渲染页面，以确保页面在不同浏览器和设备上的一致性。如果没有正确的 doctype 声明，浏览器可能会以不同的方式解释页面，导致页面显示不正确。因此，doctype 声明是编写有效的 HTML 或 XHTML 文档的重要组成部分。

浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？

浏览器标准模式、几乎标准模式和怪异模式是浏览器解析 HTML 或 XHTML 文档时的三种不同模式。它们的区别如下：

1. 标准模式：浏览器按照 HTML 或 XHTML 规范解析文档，并且尽可能地遵循最新的 Web 标准。在标准模式下，页面的布局和渲染方式与不同浏览器之间的差异最小。
2. 几乎标准模式：浏览器按照 HTML 或 XHTML 规范解析文档，但是在某些方面可能会有一些不兼容的行为。几乎标准模式是为了兼容旧的 Web 页面而设计的。
3. 怪异模式：浏览器使用一种类似于早期浏览器的解析方式来解析文档。在怪异模式下，页面的布局和渲染方式可能会与标准模式下的差异很大。

要在页面中指定使用哪种模式，需要使用 doctype 声明。如果没有正确的 doctype 声明，浏览器可能会默认使用怪异模式，导致页面显示不正确。因此，编写有效的 HTML 或 XHTML 文档时，正确使用 doctype 声明是非常重要的。

HTML 和 XHTML 有什么区别？

HTML（Hypertext Markup Language）和XHTML（Extensible Hypertext Markup Language）都是用于创建网页的标记语言，它们之间的主要区别在于语法和规范。

1. 语法：HTML的语法比较宽松，允许一些不规范的写法，而XHTML的语法比较严格，必须遵循XML的语法规则，包括必须有一个根元素、所有元素必须有结束标签等。
2. 规范：HTML和XHTML的规范也有所不同。HTML的规范由W3C（World Wide Web Consortium）和WHATWG（Web Hypertext Application Technology Working Group）共同制定，而XHTML的规范由W3C制定。
3. MIME类型：HTML的MIME类型是"text/html"，而XHTML的MIME类型是"application/xhtml+xml"。
4. 兼容性：由于XHTML的语法比较严格，不允许一些不规范的写法，因此在一些旧版本的浏览器中可能无法正常显示。而HTML的语法比较宽松，兼容性比较好。

总的来说，XHTML是HTML的一种更加严格的版本，它强制要求遵循XML的语法规则，可以提高网页的可靠性和可维护性。但是，由于XHTML的语法比较严格，需要更加谨慎地编写代码，同时也需要考虑兼容性问题。

如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？

如果页面使用 'application/xhtml+xml'，会有一些问题：

1. 兼容性问题：不是所有的浏览器都支持 'application/xhtml+xml' 类型的文档，特别是旧版本的浏览器。这可能会导致页面无法正常显示或者无法加载。
2. 语法问题：'application/xhtml+xml' 类型的文档必须遵循 XML 的语法规则，包括必须有一个根元素、所有元素必须有结束标签等。如果页面中存在语法错误，可能会导致页面无法正常显示或者无法加载。
3. 脚本问题：'application/xhtml+xml' 类型的文档不支持内联脚本，必须使用外部脚本。这可能会导致页面的性能受到影响，因为每次加载页面时都需要加载外部脚本。
4. 样式问题：'application/xhtml+xml' 类型的文档不支持内联样式，必须使用外部样式表。这可能会导致页面的性能受到影响，因为每次加载页面时都需要加载外部样式表。

因此，如果页面使用 'application/xhtml+xml'，需要考虑以上问题，并确保页面的语法正确、兼容性良好、脚本和样式的性能优化等。

如果网页内容需要支持多语言，你会怎么做？

如果网页内容需要支持多语言，我会使用国际化（i18n）技术来实现。具体来说，我会将网页中的所有文本内容都提取出来，然后将其存储在一个翻译文件中，每个语言对应一个翻译文件。当用户选择不同的语言时，我会根据用户的选择加载对应的翻译文件，并将网页中的文本内容替换为对应语言的翻译。这样就可以实现网页内容的多语言支持了。

CSS相关问题

CSS 中类 (classes) 和 ID 的区别。

类 (classes) 和 ID 是 CSS 中用于标识和选择元素的两种不同方式。

类是一种可以在 HTML 中多次使用的标识符，用于标识一组具有相似特征的元素。在 CSS 中，可以使用类选择器来选择具有相同类的所有元素，并对它们应用相同的样式。

ID 是一种在 HTML 中唯一使用的标识符，用于标识一个具有唯一特征的元素。在 CSS 中，可以使用 ID 选择器来选择具有特定 ID 的元素，并对它们应用相同的样式。

因此，类和 ID 的主要区别在于它们在 HTML 中的使用方式和在 CSS 中的选择方式。类可以在多个元素中使用，而 ID 只能在一个元素中使用。同时，类选择器可以选择多个元素，而 ID 选择器只能选择一个元素。

请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？

“Resetting” 和 “normalizing” CSS 都是用于重置浏览器默认样式的技术，但它们的实现方式和效果略有不同。

“Resetting” CSS 是通过将所有元素的默认样式重置为零来实现的，以确保在不同浏览器和设备上的一致性。这意味着所有元素都将没有边距、填充、字体大小等样式，需要手动为每个元素添加样式。

“Normalizing” CSS 是通过在所有浏览器中应用一组公共样式来实现的，以确保在不同浏览器和设备上的一致性。这意味着所有元素都将具有相同的基本样式，但仍然保留了一些默认样式，以确保页面的可访问性和可用性。

选择使用哪种技术取决于具体情况。如果您需要完全控制页面的样式，并且不希望受到浏览器默认样式的影响，则可以使用“Resetting” CSS。如果您希望页面具有一致的外观和可访问性，并且希望保留一些默认样式，则可以使用“Normalizing” CSS。

请解释浮动 (Floats) 及其工作原理。

浮动（Floats）是CSS中的一种布局方式，它可以让元素脱离文档流并向左或向右浮动，使得其他元素可以环绕在其周围。浮动元素通常用于创建多列布局、图像浮动等效果。

浮动元素的工作原理如下：

1. 浮动元素会脱离文档流，不再占据原来的位置，而是向左或向右浮动，直到遇到父元素的边界或其他浮动元素。
2. 父元素的高度会塌陷，因为浮动元素不再占据原来的位置。为了解决这个问题，可以使用清除浮动（Clearfix）技术。
3. 其他元素会环绕在浮动元素的周围，如果浮动元素的宽度超过了父元素的宽度，那么浮动元素会被截断。

需要注意的是，浮动元素的宽度默认是自适应的，可以通过设置宽度或使用盒模型来控制宽度。同时，浮动元素的高度也是自适应的，可以根据内容自动调整高度。

浮动元素的应用非常广泛，可以用于创建多列布局、图像浮动、导航菜单等效果。但是，需要注意浮动元素可能会影响其他元素的布局，需要谨慎使用。同时，需要注意清除浮动，以避免父元素高度塌陷的问题。

描述z-index和叠加上下文是如何形成的。

z-index是CSS中用于控制元素在垂直方向上的叠放顺序的属性。具体来说，z-index值越大的元素会覆盖在z-index值较小的元素之上。

叠加上下文是指一个元素及其子元素形成的一个独立的图层，该图层可以影响元素的z-index值。叠加上下文的形成有以下几种情况：

1. 根元素：根元素是所有元素的祖先元素，它形成了一个叠加上下文。
2. position属性为fixed或sticky的元素：这些元素会形成一个独立的图层，可以影响其他元素的z-index值。
3. position属性为relative或absolute的元素，并且z-index值不为auto的元素：这些元素会形成一个独立的图层，可以影响其他元素的z-index值。
4. opacity值小于1的元素：这些元素会形成一个独立的图层，可以影响其他元素的z-index值。

当一个元素形成了叠加上下文后，它的子元素也会继承该叠加上下文，除非子元素自身也形成了叠加上下文。

需要注意的是，z-index值只能在同一叠加上下文中比较大小，不同叠加上下文中的z-index值无法比较。因此，在使用z-index属性时，需要注意元素的叠加上下文，以避免出现意外的覆盖效果。

请描述 BFC(Block Formatting Context) 及其如何工作。

BFC（Block Formatting Context），即块级格式化上下文，是CSS中的一个概念，它是用于控制块级元素布局的一种机制。具体来说，BFC可以将一个块级元素及其子元素包含在一个独立的布局环境中，从而影响元素的布局和渲染。

1. BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
2. 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

BFC的“特异功能”（渲染规则）

• 内部的盒子会在垂直方向上一个接一个的放置
• 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。
• BFC的区域不会与float的元素区域重叠。
• 计算BFC的高度时，浮动子元素也参与计算。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC的工作原理

1. 创建BFC：当一个元素满足以下条件之一时，它会创建一个BFC：

• 根元素，即HTML元素
• float属性不为none，即为left、right
• position属性为absolute或fixed
• display属性为inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid
• overflow属性不为visible，即为 auto、scroll、hidden
  • overflow的布局不会影响到外部元素，同时外部元素的布局也不会影响到这个 BFC 中的子元素，这就是为什么设置了 overflow: hidden; 的元素的内容不会溢出其盒子：即使子元素的大小超过了父元素，也不会影响到父元素以外的布局。

1. 形成独立的布局环境：当一个元素创建了BFC后，它会形成一个独立的布局环境，该环境与其他元素的布局环境相互独立，不会影响其他元素的布局。
2. 影响元素的布局和渲染：BFC可以影响元素的布局和渲染，具体表现如下：
   • 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
   • 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
   • 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

BFC的应用场景

利用BFC的特性，我们将BFC应用在以下场景：

防止margin重叠（塌陷）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

页面显示如下：

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

这时候，边距则不会重叠：

清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

页面显示如下：

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成BFC，则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

实现效果如下：

自适应多栏布局

这里举个两栏的布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果图如下：

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

.main {
    overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

效果如下：

小结

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素