BFC特性 形成BFC
1、示例代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>BFC</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head> <body>
<!--parent的高度是110px，若没有形成BFC的话，高度是100px-->
<style type="text/css">
.child {
height: 100px;
margin-top: 10px;
} .parent {
/*形成bfc*/
overflow: hidden;
border: 1px solid yellow;
}
</style>
<div class="parent">
<div class="child">
1
</div>
</div>
<!--同级的元素垂直编剧会重叠-->
<style type="text/css">
.s1 {
height: 100px;
margin-bottom: 20px;
border: 1px solid red;
overflow: hidden;
} .s2 {
height: 100px;
margin-top: 30px;
overflow: hidden;
border: 1px solid blue;
}
</style>
<div class="s1">
</div>
<div class="s2">
</div>
<!--解决方法是：将某一个同级元素已添加父元素，使父元素形成BFC-->
<style type="text/css">
.s1 {
height: 100px;
margin-bottom: 20px;
border: 1px solid red;
overflow: hidden;
} .s2 {
height: 100px;
margin-top: 30px;
overflow: hidden;
border: 1px solid blue;
}
</style>
<div class="s1">
</div>
<div style="overflow: hidden;">
<div class="s2">
</div>
</div>
<script type="text/javascript">
</script>
</body> </html>
2、说明
（1）形成BFC的元素，会在垂直方向叠加margin （说明不形成BFC的话，父子元素和同级元素都会在垂直方向重叠margin）
（2）形成BFC的元素，不会与浮动元素重叠
（3）形成BFC的元素，不会影响外面的布局；外面的布局也不会影响BFC内部布局
（4）形成BFC的元素的高度会将浮动元素计算在内。
3、形成BFC的条件
（1）float不为none
（2）position不为relative和static
（3）overflow不为visible
（4）dispaly为inline-block、table-（具有table的属性）
BFC特性 形成BFC的更多相关文章
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- 元素的BFC特性与自适应布局
一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...
- CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
- css学习_css BFC特性（块级格式化上下文）
块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题 1.什么是BFC? 就是一个封闭独立的渲染的区域 2.什么元素会有BFC的条件? ---块级元素会有,行 ...
- BFC特性及其简单应用
BFC是什么? BFC(Block Formatting Context)中文直译就是‘块级格式上下文’,它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元 ...
- BFC特性下多栏自适应布局
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- BFC的概念、BFC触发方式、BFC作用介绍
一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...
- HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)
BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...
- BFC(块级格式化上下文)笔记
BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...
随机推荐
- 递归搜寻NSString中重复的文本
递归搜寻NSString中重复的文本 效果 源码 https://github.com/YouXianMing/iOS-Project-Examples 中的 StringRange 项目 // // ...
- LeakCanary，30分钟从入门到精通
简述 在性能优化中,内存是一个不得不聊的话题:然而内存泄漏,显示已经成为内存优化的一个重量级的方向.当前流行的内存泄漏分析工具中,不得不提的就是LeakCanary框架:这是一个集成方便, 使用便捷, ...
- 详解Java多线程编程中LockSupport
LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程,而且park()和unpark() ...
- 详细解读Android中的搜索框（一）—— 简单小例子
这次开的是一个讲解SearchView的栏目,第一篇主要是给一个小例子,让大家对这个搜索视图有一个了解,之后再分布细化来说. 目标: 我们先来定个目标,我们通过搜索框来输入要搜索的联系人名字,输入的时 ...
- 从Android4.0源码中提取的截图实现（在当前activity中有效，不能全局截图）
原文:http://blog.csdn.net/xu_fu/article/details/39268771 从这个大神的博客看到了这篇文章,感觉写的挺好的.挺实用的功能.虽然是从源码中提取的,但是看 ...
- jquery的radio和checkbox的标签的操作集合
jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...
- JUnit4单元测试入门教程
本文按以下顺序讲解JUnit4的使用 下载jar包 单元测试初体验 自动生成测试类 执行顺序 @Test的属性 下载jar包## 下载地址 在github上,把以下两个jar包都下载下来. 下 ...
- HTTP tunnel
HTTP Tunneling is a technique by which communications performed using various network protocols are ...
- java8 快速入门 lambda表达式 Java8 lambda表达式10个示例
本文由 ImportNew - lemeilleur 翻译自 javarevisited.欢迎加入翻译小组.转载请见文末要求. Java 8 刚于几周前发布,日期是2014年3月18日,这次开创性的发 ...
- 如何在CentOS 7.2上创建NFS的Share，然后让Client可以访问
讲得详细清楚明白的好文. Setting Up an NFS Server and Client on CentOS 7.2 https://www.howtoforge.com/tutorial/s ...