一、常见定位方案

二、BFC 概念

BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。

它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

三、BFC 布局规则

  1. 内部的Box会在垂直方向,一个接一个地放置;
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
  4. BFC的区域不会与float box重叠;
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此;
  6. 计算BFC的高度时,浮动元素也参与计算。

四、BFC 触发条件

  1. 根元素;
  2. float属性不为none(可以是left、right);
  3. position为absolute或fixed;
  4. display为inline-block, table-cell, table-caption, flex, inline-flex;
  5. 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布局的更多相关文章

  1. 前端BFC布局学习

    BFC,全称为(Block formatting context).按照我的理解是我们在某一条件下会触发BFC布局,会产生一定的效果. Block Formatting Contexts翻译为:块级元 ...

  2. BFC布局

    这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自 ...

  3. H5移动前端完美布局之padding

    序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padd ...

  4. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  5. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  6. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  7. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  8. 浅析BFC布局的概念以及作用

    BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...

  9. BFC布局原理

    写这篇博客的初衷其实是在解决浮动的时候看到的这个方法,就想着BFC是什么,为什么可以清除浮动.结果不看不知道,一看越看越不明白,潜下心来研究看看,总结一下学习心得. 1.BFC是什么 BFC就是Box ...

随机推荐

  1. eclipse.ini相关问题

    一般新装的eclipse,在eclipse.ini文件中,有设置默认的内存信息,如果你要开发一个大的项目或者导入大的项目,那么,eclipse就会时不时报出这样的错误:An internal erro ...

  2. Isilon的WebUI上指定跨时区时间的小问题

    Isilon的WebUI的界面长这样: 假设我们在中国,也就是GMT+8的时区,我们想修改一个远在美国的Isilon cluster的时间. 你会发现,界面上用于指定时间的地方应该填写的不是下面选择的 ...

  3. Go学习笔记之Map

    Go学习笔记之Map Map 引用类型,哈希表.map的key必须可以比较相等,除了slice, map, function的内建类型都可以作为key.struct类型不包含上述字段,也可作为key. ...

  4. java 简单工具

    1.String操作 /** * 根据正则字符串过滤不需要的字符串 * @param arr * @param regex * @return */ public static String[] fi ...

  5. texstudio基本设置

    一开始默认为英文,在上面菜单栏,“option” 1.设置中文:options->general->language->zh-cn 2.编辑和查看按钮: 3.设置默认编译器:选项-& ...

  6. 2019 荔枝java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.荔枝等公司offer,岗位是Java后端开发,因为发展原因最终选择去了荔枝,入职一年时间了,也成为了面试官,之 ...

  7. 在浏览器中输入 url 地址到显示主页的过程

    总体来说分为以下几个过程:1. DNS 解析2. TCP 连接3. 发送 HTTP 请求4. 服务器处理请求并返回 HTTP 报文5. 浏览器解析渲染页面6. 连接结束

  8. python基础03--int,bool,str

    1.1 数字int 1.i = 100  i.bit_length()   转化为二进制的最小位数 1.2 布尔 bool 1.True  False      0是False 1.3 数据转换    ...

  9. EnumSet详细讲解

    https://blog.csdn.net/tugangkai/article/details/89631886 之前介绍的Set接口的实现类HashSet/TreeSet,它们内部都是用对应的Has ...

  10. Beego 学习笔记13:Api编写

    Api编写 1>     api常用的数据的格式有json和xml这两种. 2>     下面开始讲解不同的数据格式使用的方式 1->JSON 数据直接输出. 调用 ServeJSO ...