标签：BFC 盒子 重叠 元素 滚动条 hidden 基本概念

BFC叫做块级格式化上下文，本质是在一个独立的渲染区域，单独规定区域内部的渲染规则。

BFC的布局规则

1.BFC区域不会与外部区域发生相互影响。

2..BFC内部的盒子，会在垂直方向依次排列。垂直方向上也会发生边距重叠。

3.BFC的区域不会与外部float重叠。

4.计算BFC的高度时，内部浮动元素也被计算在内。

BFC的创建

1.float：right\left

2.position:absolute\fixed\sticky

3.display:inline-block\flex等

4.overflow:hidden\scoll,非visible

visible：内容不会被修剪，会呈现在元素框之外，这是默认的值。
hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：由浏览器决定如何显示。如果需要，则显示滚动条。

BFC用途

1.边界重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

兄弟关系，同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

2.清除浮动

3.自适应布局

左边加个浮动和宽度，右边正常放盒子会发生重叠

右边盒子加个overflow:hidden，右边盒子实现自适应

标签：BFC,盒子,重叠,元素,滚动条,hidden,基本概念
来源： https://blog.csdn.net/ABCFF12333/article/details/118051512

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。