【CSS古话今说】-- 01.神奇的CSS-BFC在实战中的应用
BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。
想要实现一个BFC布局需要满足以下条件之一：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
想要创建一个BFC有很多方式，但是一些方式可能会带来其他的麻烦，例如overflow:scroll等，所以使用的时候还是要注意一下，本文统一使用overflow:hidden来创建BFC。
1. bfc区域不会与float box 重叠
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #666666;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
如果我们想要的效果是两个盒子分开，那么我们可以利用BFC的布局规则：BFC区域不会与float box重叠的原则，我们给main加上overflow:hidden的属性，神奇的事情发生了：
2. 计算bfc高度的时候，浮动元素也参与计算
<style>
body {
width: 500px;
}
.par {
border: 5px solid #fcc;
/* 下面几种方式都会生成bfc */
/* overflow: hidden; */
/* display: inline-block; */
/* position: absolute; */
/* float: left; */
}
.child {
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
}
</style>
上述代码因为浮动，会出现par高度塌陷的情况，为了达到清除内部浮动，我们可以触发par生成bfc,那么par在计算高度的时候，par内部的浮动元素child也会参与计算，所以我们给par加上overflow:hidden的属性后问题就解决了。
3. 属于同一个bfc的两个相邻box的margin会发生重叠
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
margin: 100px;
}
</style>
<body>
<p>haha</p>
<p>hehe</p>
</body>
正常我们给两个p 标签都加上了margin:100px，但是两个p之间只有100px,为什么呢，同一个BFC环境时候，重叠的margin只去最大的，所以如果想解决这个问题，我们可以把下面的p标签包一层BFC。
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
margin: 100px;
}
.warp {
overflow: hidden;
}
</style>
<p>haha</p>
<div class="warp">
<p>hehe</p>
</div>
总结BFC的三种特性
- bfc区域不会与float box 重叠
- 计算bfc高度的时候，浮动元素也参与计算
- 属于同一个bfc的两个相邻box的margin会发生重叠
【CSS古话今说】-- 01.神奇的CSS-BFC在实战中的应用的更多相关文章
- 系统讲解CSS，前端开发最神奇的技术，新手的你一定不能错过
前面小编带领大家重温了前端开发中最基本的HTML语言.如果你已经掌握了这门语言,那么恭喜你,可以去深入了解CSS技术了.CSS技术最主要的功能就是弥补HTML标记对在页面中显示外观的不足,对这些标记对 ...
- Css技术入门笔记01
在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...
- CSS Secrets 翻译笔记 01: CSS coding tips
.firDemoButton{ padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0 ...
- 神奇的 CSS，让文字智能适配背景颜色
最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- DIV+CSS专题：第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- css知多少（2）——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
随机推荐
- LCA最近公共祖先模板（求树上任意两个节点的最短距离 || 求两个点的路进(有且只有唯一的一条)）
原理可以参考大神 LCA_Tarjan (离线) TarjanTarjan 算法求 LCA 的时间复杂度为 O(n+q) ,是一种离线算法,要用到并查集.(注:这里的复杂度其实应该不是 O(n+q) ...
- 2015苏州大学ACM-ICPC集训队选拔赛（1） 1007
连通图 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submissio ...
- jenkins插件之火线扫描（静态代码扫描）
参考网址: https://blog.csdn.net/oggboy/article/details/78646622
- 7.JSP简介
---恢复内容开始--- 1.JSP简介 Java动态网页技术标准(Java Server Pages)是基于Servlet技术以及整个Java体系的Web开发技术是用于动态生成HTML文档的Web页 ...
- Linux防火墙配置学习记录
一.iptables基本原理 1.iptables是一个管理内核包过滤的工具,包含4个表,5个链 表和链被称为Netfilter模块的两个维度, 表提供特定的功能内置四个表: filter表:用于对数 ...
- SElinux学习记录
1.SELinux:是一种基于域类型模型的强制访问控制安全系统,由NSA编写设计成内核模块包含到内核中,相应的某些安全相关的应用也被打了SE Linux补丁 查看Selinux: ps -Z #查看S ...
- APP测试总结2
一.App测试流程与web项目流程区别 1.对UI要求比较高,需要更加注重用户体验.对于一个小小的屏幕,如何让用户使用更加轻便.简介.易用. 2.App是调用服务端接口展示数据.我们测试需要可以判断问 ...
- python学习之可变不可变
在python的数据类型中,整数.字符串.元组是不可变的:而列表.字典是可变的.所以不用C的思维来修改一个整数,它相当于重新定义了一个整数(原来的被覆盖掉了),名字和原来一样,但与前面的同名变量没有一 ...
- BigDecimal的使用举例，包括阶乘的相加求法思路
对于高精度要求或者运算数较大的的计算,应该使用bigdecimal类实现 import java.math.BigDecimal; public class TestSysin { public st ...
- (转)Python3.5 day3作业二：修改haproxy配置文件
原文:http://www.cnblogs.com/iwxk/p/6010018.html