浅析前端BFC布局
一、常见定位方案
二、BFC 概念
BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
三、BFC 布局规则
- 内部的Box会在垂直方向,一个接一个地放置;
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
- BFC的区域不会与float box重叠;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此;
- 计算BFC的高度时,浮动元素也参与计算。
四、BFC 触发条件
- 根元素;
- float属性不为none(可以是left、right);
- position为absolute或fixed;
- display为inline-block, table-cell, table-caption, flex, inline-flex;
- overflow不为visible(可以是hidden、scroll、auto)。
五、BFC 作用
1. 清除内部浮动
我们在布局时经常会遇到这个问题:对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
2. 垂直margin合并
在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠的结果:
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时,折叠结果是两者的相加的和。
3. 创建自适应两栏布局
<body>
<div class="wrapper">
<div class="float-left">Float left box</div>
<p>
正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
</p>
</div>
</body>
<style type="text/css">
*{
margin:;
padding:;
box-sizing: border-box;
}
.wrapper{
background: blue;
padding:10px;
color:#fff;
}
.float-left{
float:left;
background: mediumvioletred;
padding:5px;
opacity: 0.5;
}
p{
line-height:30px;
background: red;
}
</style>
显然,这是p元素中的文字受到了div.float-left元素浮动的影响;
如果想要文字环绕的效果,float是最为合适的;
如果不想要文字环绕的效果,则需要对p元素建立一个BFC,消除外界因素对其内容的影响。
常见的方法是:
overflow:hidden\auto\scroll;
display:flex\table\table-cell;
浅析前端BFC布局的更多相关文章
- 前端BFC布局学习
BFC,全称为(Block formatting context).按照我的理解是我们在某一条件下会触发BFC布局,会产生一定的效果. Block Formatting Contexts翻译为:块级元 ...
- BFC布局
这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自 ...
- H5移动前端完美布局之padding
序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padd ...
- 移动平台3G手机网站前端开发布局技巧
本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...
- 移动平台3G手机网站前端开发布局技巧汇总
移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博 发布:2011-05-10 09:11 分类:移动开发 阅读:120,618 views 7条评论 您或许正在 ...
- 前端CSS3布局display:grid用法
前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- 浅析BFC布局的概念以及作用
BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...
- BFC布局原理
写这篇博客的初衷其实是在解决浮动的时候看到的这个方法,就想着BFC是什么,为什么可以清除浮动.结果不看不知道,一看越看越不明白,潜下心来研究看看,总结一下学习心得. 1.BFC是什么 BFC就是Box ...
随机推荐
- Tomcat对取消post长度限制
1.Tomcat 默认的post参数的最大大小为2M, 当超过时将会出错,可以配置maxPostSize参数来改变大小. 从 apache-tomcat-7.0.63 开始,参数 maxPostSiz ...
- maven site 命令报错
在执行 mvn site 命令时报错: java.lang.NoClassDefFoundError: org/apache/maven/doxia/siterenderer/DocumentCont ...
- docker 学习操作记录 2
记录2 [BEGIN] // :: Connecting to ... Connection established. To escape to local shell, press Ctrl+Alt ...
- python 列出当前目录下的所有文件和目录名
>>> import os # 导入os模块,模块的概念后面讲到 >>> [d for d in os.listdir('.')] # os.listdir可以列出 ...
- JavaSE 笔试题: 自增变量
JavaSE 笔试题 自增变量 public class Test { public static void main(String[] args) { int i = 1; i = i++; int ...
- Springboot Actuator之十二:actuator aop
前言spring 中aop是一个核心概念,spring boot 是如何实现自动化配置的?现在我们就来分析一下 解析spring boot 中自动化配置是读取/META-INF/spring.fact ...
- 小程序接口无法传递session校验验证码
今天在写接口的时候发现一个问题,我用apiaaz测试一切正常,但是从小程序接口请求验证码,一直验证失败. 最开始用的图形验证码,查阅了不少资料,最后怀疑是cookie的问题,解决无果,换成了短信验证码 ...
- SpringBoot 基础(二)
目录 SpringBoot基础(二) 一.操作数据库 1. SpringBootJdbc 2. SpringBoot 整合 Mybatis 3. SpringBott 使用JPA 二.使用 Thyme ...
- Lua代码编写规范
开发中,大量使用lua,暂时根据当前状况,总结相对而言较好的规范,在多人协作中可以更好的开发.交流. 介绍 该文档旨在为使用lua编写应用程序建立编码指南. 制订编码规范的目的: 统一编码标准,通用 ...
- Tomcat 配置文件解析工具 Digester
Digester 是一个依据 xml 配置文件动态构建 Java 对象树的工具,基于 SAX 解析器进行封装,它为 SAX 事件的处理提供了更高级和友好的接口,让开发更专注于要执行的处理,隐藏了 XM ...