浅析前端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 ...
随机推荐
- Lambda表达式和方法引用
1 , 为什么用lambda表达式 将重复固定的代码写法简单化 2 ,lambda表达式的实质 对函数式接口的实现(一个接口中只有一个抽象方法的接口被称为函数式接口) package com.mo ...
- 039 RabbitMq及数据同步01
1.RabbitMq (1)问题引出 目前我们已经完成了商品详情和搜索系统的开发.我们思考一下,是否存在问题? 商品的原始数据保存在数据库中,增删改查都在数据库中完成. 搜索服务数据来源是索引库,如果 ...
- JavaScript生成一个不重复的ID
/** * 生成一个用不重复的ID */ function GenNonDuplicateID():String{ } 先看看下面的几个方法 1.生成[0,1)的随机数的Math.random,例如 ...
- 关于AQS的一点总结
关于AQS的一点总结 2017年03月13日 09:48:13 那只是一股逆流 阅读数:772 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/ ...
- golang输出双精度浮点例子(Printf)
1 package main import "fmt" func main() { var sum int = 17 var count int = 5 var mean floa ...
- docker搭建etcd集群环境
其实关于集群网上说的方案已经很多了,尤其是官网,只是这里我个人只有一个虚拟机,在开发环境下建议用docker-compose来搭建etcd集群. 1.拉取etcd镜像 docker pull quay ...
- Java 8——Lambda表达式
本篇文章不介绍Lambda的前世今生,这里只对Lambda表达的应用做详细了解.以及与内部类的差异点. Lambda表达式 Lambda表达式是Java SE 8版本中引入的新的语法糖.将功能看做方法 ...
- 能写数据后台,需要掌握哪些进阶的sql语句?
国庆假期花了一些时间,首次尝试并玩转 grafana,这几天继续不断优化和完善,如今看着自己的成果,相当满意.--逐步接近我想要的理想后台啦. 需求是不停歇的.今天我又给自己发掘了一些新需求,比如变量 ...
- 【翻译】在TypeScript中,Extends和Implements一个抽象类有什么不同
我们知道在TypeScript中一个类既可以被implement也可以被extends,有一些C#或java基础的同学可能会对此感到困惑,因为在上述两个面向对象的语言里面只有接口可以被implemen ...
- Win10 资源管理器窗口无边框的问题
将“在窗口下显示阴影”关闭,再重新打开即可. 等了这么久,才敢在工作环境使用Win10,没想到还是这么多bug和不方便之处:输入法.托盘区.蓝屏...