面试之BFC布局||圣杯布局||双飞翼布局

最新推荐文章于 2024-06-12 12:32:20 发布

原创

最新推荐文章于 2024-06-12 12:32:20 发布 · 601 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CCS布局

本文详细介绍了BFC（Block Formatting Contexts）布局的规则和触发条件，包括其作为独立容器防止元素相互影响的特点。接着，文章探讨了圣杯布局和双飞翼布局这两种常见的三栏布局解决方案，通过代码解释如何实现左右固定宽度，中间自适应的布局效果。对于圣杯布局，通过调整元素位置、浮动和相对定位来实现；而对于双飞翼布局，主要区别在于使用内层div调整main部分的margin来达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、BFC布局
BFC，即Block Formatting Contexts（块级格式化上下文），具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
1、BFC 布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
2、触发BFC
只要元素满足下面任一条件即可触发BFC特性：
body根元素
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
二、圣杯布局
1、圣杯布局就是三栏布局，按照理解目的就是两边宽度固定，中间宽度自适应。
在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。
代码详解：
html代码中 middle部分首先要放在父容器container的最前部分，因为在页面展示的时候希望是让中间部分优先渲染和展示。然后是left,right，
将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）
middle部分 width:100%占满
此时middle占满了，所以要把lef