overflow与布局上下文（BFC）_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了overflow与布局上下文（BFC）_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3906字，纯文字阅读大概需要6分钟。
内容图文
HTML采用流式布局方式，CSS的 float在这种环境下非常重要。 float常与 overflow配合使用都是因为 overflow会创建新的BFC，进而影响布局。 本文从三个方面介绍 overflow对浮动的影响：清除环绕，包裹浮动元素，以及独立布局环境。在此之前先来了解一下什么是BFC： BFC（Block Formatting Context，布局上下文） 是CSS渲染过程中进行布局的盒子，所有浮动子元素都在盒子内进行布局。 也就是说BFC内的浮动元素不会影响到BFC外部，BFC外部的环境也不会影响BFC内的布局。 MDN共列出8类元素可以生成一个BFC，包括浮动和绝对定位元素、行内块，以及 overflow不为 visible的元素。 可见， 设置 overflow:hidden可以开启一个BFC 。
BFC很多时候翻译为块级格式化上下文，其实笔者认为布局上下文更为贴切。 本质上讲一个BFC就是一个矩形块的独立布局环境。
参考： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
清除环绕效果
和其他的流式文档（包括Microsoft Word文档）一样， 为了支持环绕布局CSS引入了浮动的概念。 使得后续的文档流能够环绕在浮动元素的周围。例如：
float:leftEros. Nunc ac tellus in sapien molestie rhoncus. Pellentesque nisl. Praesent venenatis blandit velit. Fusce rutrum. Leo diam interdum ligula, eu scelerisque sem purus in tellus.
左侧
float:left
Eros. Nunc ac tellus in sapien molestie rhoncus. Pellentesque nisl. Praesent venenatis blandit velit. Fusce rutrum. Leo diam interdum ligula, eu scelerisque sem purus in tellus.
但是当我们需要分栏布局时，就要清除环绕效果。有多种方式可以做到这一点：
- 给右侧 添加 margin-left。
- 给父容器的 ::after设置 clear:both（见 利用浮动和清除浮动进行布局一文）。
本文要介绍的方法是为右侧
float:left
效果如下：
float:left
Eros. Nunc ac tellus in sapien molestie rhoncus. Pellentesque nisl. Praesent venenatis blandit velit. Fusce rutrum. Leo diam interdum ligula, eu scelerisque sem purus in tellus.
包裹浮动元素
如果一个父元素内只包含浮动元素，那么如何让父元素包裹子元素呢？
这是一个前端开发中很常见的布局问题。 存在浮动子元素时，父元素的高度是可能小于子元素的。 比如我们给父元素设置红色背景：
ChildParent
子元素超出来啦！父元素的红色背景没有完全应用到子元素上。
Child
Parent这时为父元素设置 overflow:hidden，它便成为一个BFC。
BFC内部元素不能影响外部，因此浮动子元素不可显示在父元素之外。 而父元素高度为零，难道不显示子元素了吗？ CSS决定这时就用父元素来包裹子元素吧！ 于是父元素便和子元素等高了，红色背景也就显示出来。
Child
Parent独立布局环境
overflow:hidden可以开启一个布局上下文（BFC），内部布局不会受外部影响。这在嵌套的浮动布局中非常有用。 考虑如下场景：
整个页面采用两栏布局：左侧是Sidebar定宽且向左浮动，右侧是Content自适应。 我们计划在右侧Content中显示用户列表。
SidebarUser: Alice
User: Bob
User: Charlie
假如每个用户内部布局存在着某种浮动，于是我们需要在每个用户之后清除浮动。 这会发生什么？
Sidebar
User: Alice
User: Bob
User: Charlie
用户列表中的 clear:both将整个页面布局的浮动清除了！ 从第2个用户开始，都跑到边栏Sidebar的下面了。 为了给右侧容器创建独立的布局环境，我们给右侧容器添加 overflow:hidden：
Sidebar
设置 overflow:hidden的右侧
Sidebar
User: Alice
User: Bob
User: Charlie
内容总结
以上是互联网集市为您收集整理的overflow与布局上下文（BFC）_html/css_WEB-ITnose全部内容，希望文章能够帮你解决overflow与布局上下文（BFC）_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。