首页 > TAG信息列表 > BFC

第 39 题：介绍下 BFC 及其应用。

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有： html 根元素 float 浮动 绝对定位 overflow 不为 visiable display 为表格布局或者弹性布局 BFC 主要的作用是： 清除浮动 防止同一 BFC

一篇文章带你搞定BFC~

一、什么是BFC 是 Block Formatting Contexts 的缩写，名为“块级格式化上下文”。 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。   二、BFC的特点 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器

html + css基础问题

如何理解html语义化？ 1、让人更容易读懂（增加代码可读性 2、让搜索引擎更容易读懂（SEO） 盒模型宽度 box-sizing margin负值的问题 margin-top 和 margin-left ,元素向上，向左移动 margin-rightf负值,右侧元素左移动,自身不受影响 margin-bottom 负值下方元素上移,自身不受影响 什么是BF

前端里的BFC是什么，如何理解，如何创建BFC

BFC是什么 BFC的全称：block formatting context（块级上下文） 它是一个独立的渲染区域，只有它规定了内部的Block level box如何布局，并且与这个区域外部毫不相干 如何让理解BFC 具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素 可以理解为BCF

BFC ( 块级格式化上下文 )

一. 什么是BFC ? 　　1. 直译过来为块级格式化上下文，其布局方式实现核心为“隔离” ，可以将其理解为一个容器 　　2. 其目的是形成一个相对独立的容器空间，使其内部的子元素处于一个独立的bfc容器，进而不影响bfc容器外部区域 　　3. 需要注意的是，其生效界限为第一层子元素，而不包括bfc

五、BFC

1.理解BFC BFC，全称“块级格式化上下文”（block formatting context），可以为元素提供一个独立的空间，将元素内部的内容与外部的上下文隔离开，不会相互影响。这种隔离为创建BFC的元素做了以下事情： 包含了内部所有元素的上下外边距，它们不会跟BFC外面的元素产生外边距折叠（内部元素与其创建

HTML & CSS 部分

1、流式布局：百分比自适应布局 pc端可以通过设置版心来,完成不同屏幕的适配？ 移动端一般采用流式布局(百分比布局) 1. 高度定死,宽度自适应 2. 对于大的轮播图等,宽度100%自适应 3. 对于小图标挥着文本,一般都是固定宽高大小 流式布局的缺点: 对于大屏幕来说,用户体验并不是特别好

BFC块级格式化上下文

BFC Blocking Fomatting Context 块格式化上下文 是Web页面的可视化CSS渲染的一部分，是浮动元素与其他原色交互的区域   ①BFC是一个独立的布局空间，BFC内部元素布局与外部互不影响 ②可通过一些条件触发BFC   触发条件: ①根元素html ②float不为none ③overflow不为visible ④d

BFC

Block Formatting Context（块级格式化上下文） 1.每一个BFC区域只包括其子元素，不包括其子元素的子元素 2.每一个BFC区域都是独立隔绝的，互不影响。 3.触发BFC的条件 body根元素 弹性布局flex position定位 absolute，fixed 单元格table-cell 行内块 inline-block 设置overfl

【Web前端HTML5&CSS3】08- 高度塌陷与BFC

高度塌陷与 BFC BFC：             全称:Block Formatting Content;是一个与上下文无关的独立的渲染区域；（块级格式化上下文）             是一种布局规则：  内部的Box会在垂直方向，一个接一个地放置。  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的mar

css--BFC是什么，有什么用，怎么用？

前言 　　作为前端开发人员或者学生，你一定知道BFC这个关键词，但是你是否具体了解过什么是BFC?BFC有什么用？BFC怎么用些问题呢?本文就来总结一下相关的知识点，希望对阅读到的小伙伴在面试、学习、开发中有所帮助。 正文 　　1、什么是BFC 　　首先来看下下面的代码段1： <style>

bootstrap中的清除浮动

.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } //for IE 6/7 only .clearfix { *zoom: 1; } 　　 :after伪类在元素末尾插入了一个包含空格的字符，并设置display为table display:table

CSS学习笔记（3）

1.关于盒子的大小 默认情况下,盒子可见框的大小由内容区.内边框和边框共同决定 box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用) content-box:宽高用来设置内容区的大小 border-box:宽度和高度用来设置盒子可见框的大小 会自动调整内容区的空间(边框边距不变)以适

对 BFC 的理解

定义 先来看两个相关的概念： Box: Box 是 CSS 布局的对象和基本单位，这个Box就是我们所说的盒模型。 Formatting context：块级上下文格式化，它是页面中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 块格式化上下文（Block Form

BFC

BFC-块级格式化上下文 每一个BFC区域只包括其子元素，不包括其子元素的子元素 每一个BFC区域都是独立隔绝的，互不影响 触发BFC的条件： 1.body根元素 2.position不是static或者relative 3.display值为table｜table-cell｜inline-box1 4.float不是none 5.overflow：auto/hidden 用于解决： 垂直

什么是BFC？看这一篇就够了

  BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的

CSS笔记3

目录 一.轮廓阴影圆角 二.浮动  三.高度塌陷和BFC 1.高度塌陷                                                                                                                  2.BFC(block formatting cont

BFC和IFC

参考&翻译：https://www.w3.org/TR/CSS2/visuren.html 可视化盒模型 1.BFC 1.1 BFC概念： BFC： Block Formatting Context 块级格式化上下文 1.2 BFC触发： 在某个元素上设置以下属性，那么该元素内部将成为一个BFC空间 overflow属性不是visible，通常设置为autofloat属性不是nonepositi

清除浮动的方法

浮动副作用介绍： <div style="width: 250px; background: blue;"> <div style="width: 50px; height: 50px; background: red; display: inline-block; float: left;"></div> <div style="width: 50px; height: 50px; backgro

CSS--BFC

BFC ：(Block Formatting Context)， 名为 “块级格式化上下文”。 BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。 它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BF

前端学习-BFC的作用

<!DOCTYPE html> <html lang="zh"> <head>     <link rel="stylesheet" href="../css/reset.css">     <meta charset="UTF-8">     <title>Document</title>     <style>        

CSS相关面试问题

什么是BFC 原文https://blog.csdn.net/blueberry_liang/article/details/90030814 释义 BFC—— Box、Formatting Context box：盒子模型 Formatting Context：渲染文档的容器，css根据它来进行渲染 哪些元素会生成BFC: 根元素 float属性不为none position为absolute

什么是BFC？BFC是什么？为什么会有BFC

块级格式化上下文（Block Formatting Context）简称BFC BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？ 　　我们通过CSS为元素设置一些属性，就能触发，常用的有四种： 　　　　float不为none　　　　postion不为relative和s

CSS相关 | 面试高频问题（三）| 盒模型、BFC、IFC、margin塌陷、flex、grid

CSS面试高频问题（一） CSS面试高频问题（二） 4.盒子模型和box-sizing（★★★★★） CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 分类： 标准盒子模型（W3C)、怪异盒子模型（IE6） 1.标准盒子模型（W3C）： 元素width

前端面试题6道开胃菜CSS+JS+VUE

css区  一：BFC的相关： BFC的概念？ 了解：CSS2.1 中只有 BFC 和 IFC,  css3中还增加了 GFC 和 FFC。 BFC 定义： BFC（Block formatting context）直译为“块级格式上下文”， 它是一个独立渲染区域，只有BLOCK-LEVEL BOX参与， 他规定内部的BLOCK-LEVEL BOX如何布局， 并与这个区域外部不