overflow 与布局上下文（BFC）_html/css_WEB-ITnose
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（见 利用浮动和清除浮动进行布局一文）。
本文要介绍的方法是为右侧
设置 overflow:hidden。这样右侧就会形成一个BFC其内部布局不受外部浮动的影响，因此也就不会环绕左侧了。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的右侧
会被渲染成一个BFC（布局上下文）， 外部浮动元素（Sidebar）就不会影响BFC内部布局了：Sidebar
User: Alice
User: Bob
User: Charlie
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息
推荐阅读
-
精通CSS+DIV网页样式与布局CSS文字效果_html/css_WEB-ITnose
-
看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose
-
CSS+DIV：实现炫酷网页样式与布局_html/css_WEB-ITnose
-
HTML与CSS布局技巧总结_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
-
CSS易混淆知识点总结与分享－定位与布局_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
-
overflow 与布局上下文（BFC）_html/css_WEB-ITnose
-
文档流 css中的float clear与布局_html/css_WEB-ITnose
-
overflow:hiddden与绝对定位的应用场景的事例_html/css_WEB-ITnose
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论