今天来尝尝KFC，哦是弄清楚BFC 点击关注公众号，“技术干货”及时达！ 看到这个标题，你的脑海第一时间浮现的下面场景吗?? 好了，不给你看饿了?? 回到正文，想到kfc也要回想起BFC这个字节考点 引入：“核”模型盒子模型（Box Model）?CSS中的盒子模型决定了每个元素的大小和位置。 每个元素都可以视为一个矩形框，这个框由内容区域（content）、内边距 （padding）、边框（border）和外边距（margin）组成。 ?「box-sizing属性」：该属性是区分两种盒模型的方式，定义了如何计算元素的宽度和高度。 「content-box」（标准盒模型）：默认值。元素的宽度和高度只包括内容区域，不包括内边距和边框。例如，width和height只会计算内容区域的尺寸，内边距和边框是额外加上的。「border-box」（IE盒模型）：元素的宽度和高度包括内容、内边距和边框。这意味着设置的宽度会包括内边距和边框的空间，实际内容区域会根据剩余空间自动调整。 style * { margin: 0; padding: 0; } /* 盒模型 + 块级 */ .box, .box2 ,.box3{ width: 100px; height: 100px; padding: 10px; border: 1px solid red; background-color: green; } .box2 { /* border 盒子大小 IE怪异盒模型 */ box-sizing: border-box; } .box3 { /* 默认，标准盒模型，content 盒子大小 w h */ box-sizing: content-box; } /style下面三个box盒子，box本身默认使用标准盒模型content-box body div class="box"/div div class="box2"/div div class="box3"/div/body 结合上面这张图，这里显示IE盒模型，包含boder，padding的 标准盒模型 vs IE盒模型「标准盒模型」（box-sizing: content-box）： width = 内容区域的宽度height = 内容区域的高度「IE盒模型」（box-sizing: border-box）： width = 内容区域的宽度 + 内边距 + 边框height = 内容区域的高度 + 内边距 + 边框如果你希望设置元素的宽度和高度时，边框和内边距不影响最终尺寸，可以使用border-box。（注意这里强调元素宽高，不是内容~） 区分行内和块级「文档流」：是浏览器默认的元素排列方式。在文档流中，块级元素（如div）会从上到下排列，而行内元素（如span）则是从左到右排列。「块级元素」：块级元素的宽度默认是100%。这意味着它会填满其父容器的宽度。「行内元素」：行内元素的宽度由其内容决定，不能通过width和height来控制。点好KFC了，开BFC畅饮???? BFC（块级格式化上下文）?BFC（块级格式化上下文）是一个独立的渲染区域，可以视为元素的一种特性。在这个区域内的元素与外部其他元素互不干扰。BFC内的元素按块级格式化规则进行排列，其中包括该上下文中的子元素，但不包括新创建的BFC子元素。 ? div class="box1" div class="box2"/div div class="box3" div class="box4"/div div class="box5"/div /div /div假设box1,box3是BFC容器，box1这个区域只包含box2，box3（注意：不会包含box4，box5），而新的box3区域包含box4，box5 如何触发BFC?浮动元素：float 除了none其他值display：inline-block ， flex ，（表格单元）table-cells，（表格标题）table-captions）， grid，inline-grid等块级元素 overflow：除visable 其他值（hidden，auto，scroll）绝对定位 position :absolute 或 fixed根元素 html?BFC布局规则(重要！）?1，内部Box会在垂直方向，一个接一个放置2，Box垂直方向是margin决定。属于同一个BFC的两个相邻margin会发生重叠。3，每个元素margin box 左边，与包含块border box 左边相接触（对左到右的格式化，否则相反）。存在浮动也是一样4，BFC是页面上一个独立容器，容器里面子元素不会影响外面元素。反之也是5，BFC计算高度时，浮动元素也进行计算,6，BFC区域不会与float box重叠?BFC应用场景解决垂直高度坍塌根据第1条和第2条BFC布局规则 内部Box会在垂直方向，一个接一个放置Box垂直方向是margin决定。属于同一个BFC的两个相邻margin会发生重叠。!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title垂直高度坍塌/title style .box{ width: 50px; height: 100px; border: 1px solid black; } .box1 { background-color: lightcoral; margin-bottom: 50px; } .box2 { background-color: green; margin-top: 30px; } /style/headbody div class="box box1"Box1/div div div class="box box2" Box2/div /div/body/html 这里使用margin-top=30px 和 margin-bottom=50px 模拟外边距。从图片看，显示两个盒子之间只有50px的距离（边距坍塌时取最大的那个margin），不是想要的两个margin之和。外边距发生重叠，这时候我们要找BFC来处理body div class="box box1"Box1/div div style="overflow: hidden;" div class="box box2" Box2/div /div/body「建立新的BFC，根据BFC布局规则」 BFC是页面上一个独立容器，容器里面子元素不会影响外面元素。反之也是box2的父元素div的style属性设置为overflow: hidden;，这满足了上述第3点条件，因此这个div会创建一个新的 BFC。这意味着box2所在的 BFC 与box1所在的 BFC 是不同的，它们之间的垂直外边距不会发生折叠。 清除浮动 我们知道浮动元素会脱离文档流，使得后面元素环绕在它周围。如果不设置宽度，还有默认100%宽度，并且浮动元素会再普通流元素之上显示。在下面这个例子中，.float-left类的元素设置了float: left;，因此它会向左浮动，后面的.margin-box元素会环绕在它的右侧，并且.float-left在上面。 !DOCTYPE htmlhtml lang="en"head style .container { border: 2px solid #000; padding: 1px; } .float-left { float: left; /*Formating context*/ width: 150px; background-color: lightblue; margin: 10px; } .margin-box { width: 200px; height: 100px; background-color: lightgreen; margin: 20px 0 10px 100px; /*左边有外边距*/ } /style/headbody div class="container" div class="float-left"这是一个左浮动的元素/div /div div class="margin-box"这是有左侧外边距的盒子是有左侧外边距的盒子/div/body/html 当父元素只包含浮动元素，这导致父元素高度坍塌为0。所以要解决这个问题我们也可以使用BFC，因为「BFC计算高度时，浮动元素也进行计算」 // 修改style里面的container.container { border: 2px solid #000; padding: 1px; overflow: hidden; /*增加，触发bfc*/ }浮动不重叠 我们来使用这条规则—— 「BFC区域不会与float box重叠」 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleDocument/title style .container { border: 2px solid black; padding: 10px; } .float-box { float: left; width: 150px; height: 100px; background-color: lightblue; margin: 10px; } .bfc-box { width: 300px; height: 100px; background-color: lightgreen; overflow: auto; /* 创建 BFC */ }/style/headbody div class="container" div class="float-box"这是一个左浮动的盒子/div div class="bfc-box"这是一个创建了 BFC 的盒子/div /div/body/html // 修改bfc-box 类.bfc-box { width: 300px; height: 100px; background-color: lightgreen; overflow: auto;/* 创建 BFC */ }效果就是两者在父元素box里面 分离，.bfc-box不会抢着浮动元素的位置。这里就不再演示了。读者可以自行实践运用一下 「本例子扩展」 这里如果再取消float-box的margin，就可以看到包含块bfc-box其实左边和他是重叠的。这是规则：「每个元素margin box 左边，与包含块border box 左边相接触（对左到右的格式化，否则相反）。存在浮动也是一样」 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleDocument/title style .container { border: 2px solid black; padding: 10px; } .float-box { float: left; width: 150px; height: 100px; background-color: lightblue; /* 取消margin */ } .bfc-box { width: 210px; height: 100px; background-color: lightgreen; /* 没有触发bfc */ } /style/headbody div class="container" div class="float-box"这是一个左浮动的盒子/div div class="bfc-box"这是一个创建了 BFC 的盒子/div/div/body/html没有触发bfc，bfc-box盒子因为宽度210px，float-box盒子是150px，存在重叠并且会有环绕 这时候我们在bfc-box里面触发新的bfc，使用overfloat。下面给出bfc-box修改代码： .bfc-box { width: 210px; height: 100px; background-color: lightgreen; overflow: hidden; }效果出来了 值得注意了解的是：文档流就当成柜子，按一个顺序进行每种FC的布局。弹性布局（Flexbox）会打破传统的BFC规则。弹性布局本身会创建一个「Flex Formatting Context」（FFC），与传统的BFC不同。Flex容器内的元素按Flex规则布局，而不是按照传统的块级元素规则。 总结理解盒子模型和BFC有助于更精准地控制网页的布局。通过使用适当的box-sizing和BFC设置，你可以有效地解决元素排列和浮动问题，创建出符合需求的页面结构。在CSS布局中，不仅要了解如何设置宽高，还要明白如何利用BFC来实现更复杂的布局和避免元素重叠的情况。 好了，今天没尝尝KFC，先搞搞BFC吧?? 下面BFC规则进行记忆： ?1，内部Box会再垂直方向，一个接一个放置2，Box垂直方向是margin决定。属于同一个BFC的两个相邻margin会发生重叠。3，每个元素margin box 左边，与包含块border box 左边相接触（对左到右的格式化，否则相反）。存在浮动也是一样4，BFC是页面上一个独立容器，容器里面子元素不会影响外面元素。反之也是5，BFC计算高度时，浮动元素也进行计算,6，BFC区域不会与float box重叠?点击关注公众号，“技术干货”及时达！ 阅读原文