BFC:Block-level box           +   Forating  +           Context; ------->块元素          决定其子元素如何定位,及元素关系 ------->“块级格式化上下文” BFC:就是页面的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之如此(外边也不影响里面) display:inline-block  阻止嵌套元素margin重叠: overflow:hidden  超出部分隐藏.  还可以清除内部(fl…

PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ) 盒模型由 4 部分组成,从内到外分别是:content padding border margin W3C 标准盒模型一个元素的宽度(高度以此类推)应该这样计算: 1 2 3 一个元素的宽度 =  content 盒子总宽度 = margin-left + border-lef…

10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定. 浮动 (float) 在浮动布局中,元素首先按照普…

以前在做自适应两栏布局的时候别人口中听到bfc这个词,于是看了各种关于bfc的文章,发现梦想天空介绍的不错,今天就在他的基础上润色一下. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formattin…

一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染.让我们看看有哪些盒子: block-level b…

我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染部分,它是块级元素布局出现的区域,也是浮动层元素进行交互的区域,该区域是独立存在的,即BFC内部元素与外部元素之间不会相互影响. BFC能够解决的问题 解决浮动定位 解决外边距合并 清除浮动 自适应多栏布局 ...... BFC的创建方式 html元素或者包…

本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么? Block fomatting context = block-level box + Formatting Context Box: Box即盒子模型: block-level box即块级元素 display属性为block, list-item, table的元素,会生成block-lev…

一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定. 浮动 (float) 在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的…

本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么? Block fomatting context = block-level box + Formatting Context Box: Box即盒子模型: block-level box即块级元素 display属性为block, list-item, table的元素,会生成block-lev…

BFC的概念 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 它是一个独立的渲染区域,只有块级元素参与,它规定了内部的Block level Box如何布局,并且与这个区域外部好不相干. BFC能解决的问题 浮动定位 消除外边距折叠 清除浮动 自适应多栏布局 ... BFC的创建 下列方式会创建BFC 根元素或包含根元素的元素 浮动元素(float不为none)…