一些BFC
我们可能会遇到这样的一些问题,比如:子元素浮动,父元素高度塌陷;父元素跟随子元素一起移动等
这是我们可以通过触发BFC来解决这样的问题。
BFC为"块级格式化上下文"。它是一个独立的渲染区域,相当于是一个独立的环境。为一个元素里面创建这样的
环境,而这个元素本身是没有的,不会对周围的其他元素造成影响。
简单点就是:BFC就是⻚页⾯面上的⼀一个隔离的独⽴立容器,容器⾥里⾯面的⼦子元素不会影响到外⾯面的元素。反之也
如此
BFC布局的一些相关规则:
1、内部的BOX垂直一个一个放置;
2、垂直方向距离由margin决定,相邻两个margin会发生重叠
3、与包含块的左边相接触
4、不会与float重叠 等等
触发BFC:
1、根元素 body里面本身就是一个BFC环境
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible //overflow:hidden 用的比较多
例如:
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow:hidden; // 通过它来触发BFC环境,就可以在child浮动时par的高度不塌陷
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
一些BFC的更多相关文章
- 深入理解BFC
定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...
- “fixed+relative==absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- 我对BFC的理解
最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- 前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- BFC的形成条件和特性分析
初学CSS时,我们学到很多有意思的CSS规则,比如外边距塌陷,还有浮动元素的一些特性等,其实这些规则背后都是BFC这个东西在控制,下面我们来看下BFC到底是什么. 什么是BFC BFC(Block f ...
- BFC布局
这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- BFC深入理解
BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响 ...
随机推荐
- 使用maven创建web项目时后面多出来Maven Webapp如何删除
类似这样: 解决办法:
- web端实现图片放大切换显示预览
项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片 ...
- BIO、NIO、AIO
一.基础概念 IO操作分为两步:1.发起IO请求:2.执行具体IO操作: 同步和异步的区别是数据访问时进程是否阻塞或者说在执行真正IO操作时,数据能够立即返回就是异步,否则就是同步,同步和异步发生在I ...
- 01springMVC入门
1 MVC模式回顾 Spring MVC是一种基于MVC的Web应用框架. MVC是一种设计模式,MVC在b/s系统下的应用: 执行步骤: 发出请求,请求到MVC当中的C,C接收请求后并不能 ...
- 工具-VS插件Resharper快捷键
编辑Ctrl + Space 代码完成 Ctrl + Shift + Space代码完成Ctrl + Alt + Space代码完成Ctrl + P 显示参数信息Alt + Insert 生成构造函数 ...
- POJ 1950
直接DFS,因为实在没想到什么剪枝了... 注意一点是,10.11使用的是1011哦 #include <iostream> #include <cstdio> #includ ...
- 前端 自定义format函数
为字符串创建format方法,用于字符串格式化 {# 前端没有字符串占位符%s的替代方法,以下是自定义字符串替换的方法,以后前端拓展方法都可以使用下面的形式 #} String.prototype. ...
- nyoj-647-奋斗小蜗牛在请客(进制转换)
奋斗小蜗牛在请客 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 一路艰辛一路收获.成功爬过金字塔的小蜗牛别提多高兴了.这不为了向以前帮助他的哥们们表达谢意,蜗牛宴请 ...
- .net mvc Model 验证总结
ASP.NET MVC4中的Model是自验证的,这是通过.NET4的System.ComponentModel.DataAnnotations命名空间完毕的. 我们要做的仅仅是给Model类的各属性 ...
- MFC exe使用C++ dll中的std::string 崩溃
VC6中 MFC exe中 new 纯C++ dll dll 崩溃 我把纯C++的 dll,用/MTd 换成/MDd.就能够了