overflow与布局上下文（BFC）_html/css_WEB-ITnose

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:left

      
查看更多关于overflow与布局上下文（BFC）_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114873