浅谈BFC与高度塌陷

这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Context(块级格式化上下文) 简称BFC. BFC有什么用?如何开启BFC?开启BFC后会发生什么? 在这里我们先看看几个小情境.并且抛出几个另外的问题 (1) <div class="div1"> <div class="div2">div2&l…

【css】浅谈BFC

定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布局规则如下: .内部的盒子会在垂直方向,一个个地放置: .盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠: .每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此: .BFC的区域不会与float重叠: .BFC就是页面上的一个隔离的独立…

浅谈BFC与应用

什么是BFC BFC(Block formatting context)的中文翻译我们一般叫做块级格式化上下文.它是一个独立渲染的区域,规定了内部如何布局,同时不受外界的影响.我们的根元素本身就是一个BFC BFC的特性 BFC的特性有很多,但是这里主要说到四点,也是我们常用的. BFC内部的margin会发生折叠,即是我们常说的margin collasping. BFC内部的浮动元素也参与高度计算,我们常利用此点解决高度塌陷的问题. BFC的区域不会与float box重叠,我们可以利用这点…

浅谈BFC

Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染.Formatting context 是 W3C CSS2.1 规范中的一个概念.它是页?面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作?用.最常见…

浅谈BFC和IFC

先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作用.BFC和IFC都是常见的FC. 分别叫做Block Fomatting Context 和Inline Formatting Context. BFC BFC(Block Formatting Context)叫做"块级格式化上下文".BFC的布局规则例如以下: 1.内部的盒子会在垂直…

浅谈BFC的理解

在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置呈现,然后根据浮动的方向向左边或右边偏移. 定位流(Position) 在绝对定位布局中,元素会整体脱离普通流,而元素的具体位置由绝对定位的坐标决定. BFC 即 Block Formatting Contexts (块级格式化上下文),它属于普通流.具有 BFC 特性的元素可以看作是隔离了的独立容…

BFC 浅谈

写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden | auto | scroll: 只要不为visible新的空间告诉浏览器,外面的环境影响不到我了我重新来进行Block formatting 布局和定位核心: 新的BFC,给出了新的不受外界影响的块级格式化环境 block 块级-> 页面的基础 formatting context 格式化-…

加overflow-hidden就可以解决高度塌陷问题，overflow-触发BFC

1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝.2.独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器…

浅谈对BFC的认识，以及用bfc解决浮动问题

我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Formatting Context)即“块级格式化上下文.我来简单的解读一下: 1.块级对应单词Block,不难想到的就是display中block属性,block属性是将此元素作为块级元素显示,根据块级元素的特性进行渲染,具体的特性下文再来细说. 2.格式化Formatting,格式化这个此相信不用…

整理高度塌陷与BFC

当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 对,没错,这是一个完美的解决方案,但是我们有考虑过这个方案的实现原理吗,或者面试管继续问你这个方法的原理是什么?是不是一脸懵,不懵的也别杠,接下来我通过排他法来展示他的原理 1. 首先 ::after 是元素的伪元素,在元素后面生成伪元素 2.content…

高度塌陷与BFC

高度塌陷的产生条件子元素浮动,脱离文档流子元素绝对定位或固定定位,脱离文档流定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 1.直接给父元素加高度 div{ border: 5px solid black; height: 200px; } p{ width: 200px; height: 200px; background-color: aqua; float: left; } 优点:代码简单,容易理解缺点:自适应性…

浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

浮动引发的高度塌陷问题高度塌陷问题的产生 BFC(Block Formatting Context)的引入元素开启BFC后的特点开启BFC的元素不会被其他浮动元素所覆盖开启BFC的元素不会发生父子元素外边距重叠开启BFC后可以包含浮动的子元素如何开启BFC 设置元素浮动将元素display属性设置为inline-block.table等 overflow属性设置为非visible值开启定位高度塌陷解决方法1: 父元素高度写死高度塌陷解决方法2: 为父元素也设置浮动高度塌陷解…

高度塌陷与 BFC

1. 高度塌陷在浮动布局中,父元素的高度默认是被子元素撑开的当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱 2. clear(有一定的弊端和隐患) clear作用:清除浮动元素对当前元素所产生的影响(本质是为元素添加一个margin-top属性,值由浏览器自动计算) 可选值: left 清除左侧浮动元素对当前元素的影响 right 清除右侧浮动元素对当前元素的影响 …

css之高度塌陷及其解决方法

浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素:按照从上到下的方式逐个排列页面中的行内元素:按照从左到右的方式逐个排列但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性取值为 left/right 脱离文档流 3.相对定位 relative 元素会相对于它原来的位置偏移某个距离,改变元素位…

浅谈五大Python Web框架

转载:http://feilong.me/2011/01/talk-about-Python-web-framework 说到Web Framework,Ruby的世界Rails一统江湖,而Python则是一个百花齐放的世界,各种micro-framework.framework不可胜数,不完全列表见: http://wiki.python.org/moin/WebFrameworks 虽然另一大脚本语言PHP也有不少框架,但远没有Python这么夸张,也正是因为Python Web Frame…

浅谈算法和数据结构: 七二叉查找树八平衡查找树之2-3树九平衡查找树之红黑树十平衡查找树之B树

http://www.cnblogs.com/yangecnu/p/Introduce-Binary-Search-Tree.html 前文介绍了符号表的两种实现,无序链表和有序数组,无序链表在插入的时候具有较高的灵活性,而有序数组在查找时具有较高的效率,本文介绍的二叉查找树(Binary Search Tree,BST)这一数据结构综合了以上两种数据结构的优点. 二叉查找树具有很高的灵活性,对其优化可以生成平衡二叉树,红黑树等高效的查找和插入数据结构,后文会一一介绍. 一定义二叉查找树(B…

[转]浅谈Python web框架

说到web framework,Ruby的世界Rails一统江湖,而Python则是一个百花齐放的世界,各种micro-framework.framework不可胜数,不完全列表见:http://wiki.python.org/moin/WebFrameworks.虽然另一大脚本语言PHP也有不少框架,但远没有Python这么夸张,也正是因为Python web framework(Python web开发框架,以下简称Python框架)太多,所以在Python社区总有关于Python框架孰优孰…

iOS应用架构浅谈

(整理至http://www.cocoachina.com/ios/20150414/11557.html) 缘由从事iOS工作一年多了,主要从事QQ钱包SDK开发和财付通app维护,随着对业务的慢慢熟悉,最近在思考这两款应用架构设计的思想,刚好昨天在微信里看了一篇iOS大牛对终端应用架构的分享,乘热打铁,下面浅谈下我对ios应用架构设计的理解,写的不好或不对的地方,欢迎大家拍砖,我们一起来探讨. 假如问你一个iOS or Android app的架构,你会从哪些方面来说呢? 不要急着给出你的…

【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件

简介马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识点记录成博客与大家分享. 在我们使用 NGUI 插件创建的 UI 中,可以发现 UIRoot 物体和 Camera 物体上面都带有 NGUI 特有的脚本组件,其中 UIRoot 物体上面带有 UIRoot 和 UIPanel 两个组件,而子物体 Camera 带有一个 UICamera 组件,这三个…

[UWP]浅谈按钮设计

一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不会对性能有多大影响,所以不少注重细节的设计师最为热衷修改按钮.(例如这位 ) 目前UWP只提供了基础款的按钮样式,网上相关资源也较少,所有写了这篇文章用于介绍在UWP上设计按钮的入门知识. 1. VisualStates Button的CotrolTemplate(可以参考这里 )中包含四个Vi…

轻谈BFC

BFC 定义 CSS2.1的定义 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' oth…

浅谈CDN、SEO、XSS、CSRF

CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN. CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时候是在找JS文件时.当时找不到相对应的JS文件下载地址(之前一般我都是把JS下载下来,然后在项目中引用的.PS:当然了,我觉得大部分初学者都一样) 找着找着发现了这个网站:http://www.bootcdn.cn/,发现它这个搜索引擎收录了很多的JS文件,直接在项目中引入它的地址就行了! 后来,在购买服务器的时候也发现了广告:CDN加速…

Web Service进阶(七)浅谈SOAP Webservice和RESTful Webservice

浅谈SOAP Webservice和RESTful Webservice REST是一种架构风格,其核心是面向资源,REST专门针对网络应用设计和开发方式,以降低开发的复杂性,提高系统的可伸缩性.REST提出设计概念和准则为: 1.网络上的所有事物都可以被抽象为资源(resource) 2.每一个资源都有唯一的资源标识(resource identifier),对资源的操作不会改变这些标识 3.所有的操作都是无状态的 REST简化开发,其架构遵循CRUD原则,该原则告诉我们对于资源(包括网络资源…

x(29)0908第五天__高度塌陷问题

高度塌陷在文档流中,父元素的高度默认是被子元素撑开的. 但是当为子元素设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱变成 BFC块级格式化环境根据 W3C 标准,元素都有一个隐含的属性 “Block Formatting Context” 该属性可以打开/关闭,默认是“关闭”. 当开启BFC后,元素将具有如下特性: 1. 父元素的垂直外边距不会和子元素重叠. 2. 不会被浮动元素所覆盖,会在浮动元素的旁边显示. 3. 可以包含浮…

css关于浮动的高度塌陷

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 100px;} .div2 {backgr…

浅谈JS面向对象

浅谈JS面向对象一 .什么是面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象最先出现在管理学中,是一种管理资源(资源等于空间)和能力(能力导致运动,运动等于时间)的方法论. 面向对象是一种思维方法面向对象是一种编程方法面向对象并不只针对某一种编程语言三.面向对象和面向过程的区别和联系 “面向过程”是一种以过程为中心的编程思想. 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步…

浅谈React数据流管理

引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章希望能用最浅显易懂的话,将react中的数据流管理,从自身到借助第三方库,将这些概念理清楚.我会列举几个当下最热的库,包括它们的思想以及优缺点,适用于哪些业务场景.这篇文章不是教程,不会讲如何去使用它们,更不会一言不合就搬源码,正如文章标题所说,只是浅谈,希望读者在读完以后就算原先没有使用过这些库,…