BFC——块级格式上下文
BFC中的B指的是block,对应的还有IFC,I指的是inline。
对于BFC的理解可以参考层叠上下文。页面中,盒子的排布规则,是生效在对应的BFC中。两个BFC中的布局互不影响。
页面的本身的根本身就是BFC,但是页面中的其他元素,则需要我们用css去设置,才会生成新的BFC。有以下方法:
- float的值不为none。
- overflow的值不为visible。
- display的值为table-cell、table-caption、inline-block中的任一个。
- position的值不为relative与static。
详细内容可见另一博主的文章:http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
BFC——块级格式上下文的更多相关文章
- BFC块级格式上下文
BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...
- BFC块级格式上下文介绍
块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...
- BFC块级格式
BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...
- 什么是BFC(块级格式上下文)?
㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...
- 理解 CSS 布局和块级格式上下文
前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...
- CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- BFC——块级格式化上下文
BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...
- CSS--理解块级格式上下文(BFC)
1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...
随机推荐
- QML之窗口(无边框、透明及拖拽)
1.无边框 Qt Quick 2.0 中 QQuickView代替了1.0中的QDeclarativeView. 无边框窗口代码如下: QQuickView viwer; //QQuickView继承 ...
- postgres安装 以及修改postgres 密码
#postgres安装 apt-get install postgresql-9.3 postgresql-client-9.3 postgresql-contrib-9.3 postgresql-s ...
- d017: 打印某年某月有几天
内容: 打印某年某月有几天 输入说明: 一行两个整数,前面是年份 后面是月份 输出说明: 一个整数 输入样例: 2009 6 输出样例 : 30 #include <stdio.h> ...
- ie浏览器下HTML上传控件input=file的美化
近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...
- Linux下配置QT环境
一.下载Qt源码包到本机,然后解压缩 #tar zxvf qt-x11-opensource-src-4.3.2.tar.gz -C /usr/local //将qt-x11-opensource-s ...
- JavaScript 中的非真值
False values 下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("& ...
- IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示
1.问题描述 在Idea的spring工程里,经常会遇到Could not autowire. No beans of 'xxxx' type found的错误提示.但程序的编译和运行都是没有问题的, ...
- Qt入门(5)——用Qt控件创建一个电话本界面
具体实现步骤: 一.首先用 Qt Designer 创建一个两张图的对话框,分别保存为listdialog.ui和editdialog.ui文件 要注意其中各个空间对应的名称修改好 二.新建一个Qt应 ...
- Android SDK下载和更新失败的解决方法!!!
Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-1.xml. 据说dl-ssl.google.c ...
- POJ_3009——冰球,IDS迭代加深搜索
Description On Planet MM-21, after their Olympic games this year, curling is getting popular. But th ...