理解BFC以及BFC相关布局问题解决
写页面时会遇到:
- 子元素float父元素的高度不会撑开;
- 在布局时,box1and box2,其中box1 float:left,这是box2会在box1下面,(如果文字过多就会形成文字环绕效果),但我就是想要box2在box1的右侧;
- 又或是上下两个box的margin重叠。
这些问题除了其他一些方法解决外,都可以利用加上overflow:hidden,但是why?其实 BFC的作用呢。
BFC??啥?
BFC这个词....
BFC:全称box formatting context;即块格式上下文,block-level元素参与;
那么什么是block-level呢?
等等 等等...
'W3C' CSS2.1规范:
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display'property make an element block-level: 'block', 'list-item', and 'table'.
块级元素是源文档中被视为块(例如段落)可视化格式的那些元素。 'display'属性的以下值构成一个块级别:'block','list-item'和'table'。
那它是怎么形成的呢?
以下情况之一:
- float值不为none
- position:fixed / absolute
- display:table-cell / table-caption /inline-block / flex / inline-flex.
- overflow属性不为visible
我们知道了什么是BFC,如何形成BFC,接下来就要说BFC的布局规则啦
滴滴滴...
- 内部的box会一个接一个地垂直布局。
- 两个相邻box的垂直距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个盒子的左外边框紧挨着左边框的包含块(从左往右的格式化时,否则相反)。即使存在浮动也是如此
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算.
该知道的理论也差不多了,该解答了~
问题1:子元素float父元素的高度不会撑开
<section class="container">
<style>
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
}
.left{
float: left;
width: 100px;
height: 80px;
background: #FF0066;
}
.right{
background: #FFCCFF;
}
</style>
<div class="left">我是left</div>
<div class="right">我是right</div>
</section>
效果:
我们看到container只是right的高,而left中float使该元素脱离了文档流它的高没有计算在内,现在要想left的高度计算在内,根据BFC布局规则6就可以,形成一个BFC区不就可以计算float的高度喽,来,上码:
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: hidden;
}
果真嘿,其实,这里不止加overflow:hidden,加上边介绍任何一种可以形成BFC区奏行,比如:overflow: auto; / float: left; /display: flex;等等,根据项目中的实际需求。
2.问题2:box2在box1右侧
在问题1里的代码基础上,把right区增加一个高度比如300px,就可以看到效果liu
.right{
background: #FFCCFF;
height: 300px;
overflow: hidden;
}
由于left块float的原因,导致right在left下面,解决此问题
根据BFC布局规则4 :BFC的区域不会与float box重叠,那么right形成BFC区
效果:
哇,好了呀!
问题3:magin重叠问题
<section class="container">
<style>
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: auto;
}
.box1,.box2{
height: 50px;
}
.box1{
background: #FF0066;
margin-bottom:20px;
}
.box2{
background: #FFCCFF;
margin-top:50px;
}
</style>
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
</section>
我们大多以为是80px,可结果却是50px!
why?
BFC原则2指明了同一个BFC区的margin垂直重叠,不在同一个是不是就不重叠了,来来来
...
.wrapper{
overflow:hidden;
}
...
<div class="wrapper">
<div class="box1">我是box1</div>
</div>
<!-- <div class="wrapper"> -->
<div class="box2">我是box2</div>
<!-- </div> -->
ok!通过给box1或box2添加一个父元素形成和另一个不在同一区。
关于垂直margin折叠
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值;
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值;
- 两个外边距一正一负时,折叠结果是两者的相加的和;
最后的最后,欢迎指正~
理解BFC以及BFC相关布局问题解决的更多相关文章
- 理解CSS中BFC
BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...
- Linux Debugging(四): 使用GDB来理解C++ 对象的内存布局(多重继承,虚继承)
前一段时间再次拜读<Inside the C++ Object Model> 深入探索C++对象模型,有了进一步的理解,因此我也写了四篇博文算是读书笔记: Program Transfor ...
- 理解socket.io(一)---相关的API
理解socket.io(一)---相关的API 1. 什么是Socket.IO?Socket.IO是node.js的一个模块,它用于浏览器与服务端之间实时通信.它提供了服务器和客户端的组件,只需一个模 ...
- 实践中总结——理解haslayout和BFC
1.HASLAYOUT 首先,haslayout翻译成中文就是:有布局. 所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位.这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局 ...
- 元素的BFC特性与自适应布局
一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...
- 理解css的BFC
BFC是CSS中一个看不见的盒子,(先理解CSS的盒子模型).它的页面渲染方式与普通流的盒子模型不同,它决定了其子元素将如何定位(所用属于BFC的box 都默认左对齐),以及和其他元素的关系和相互作用 ...
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
- 深入理解Magento – 第三章 – 布局,块和模板
深入理解Magento 作者:Alan Storm 翻译:Hailong Zhang 第三章 – 布局,块和模板 我们接着研究Magento.根据我们第二章讲的Magento MVC的架构,我们接下来 ...
- 理解CSS3里的Flex布局用法
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
随机推荐
- C语言--浮点数
在程序中使用浮点数 -- 浮点数的精确性有限 -- 在从c语言中float类型的精确度只到小数点的7位 -- 浮点数只能在一定范围内去相信它 -- 在有精确度高的要求下不要使用浮点数(在算钱的时候,误 ...
- tp5框架用foreach循环时候报Indirect modification of overloaded element of think\paginator\driver\Bootst错误
thinkphp5使用paginator分页查询数据后,需要foreach便利处理某一字段的数据,会出现类似题目的错误.主要是因为tp5使用分页类读取的数据不是纯数组的格式!所以在循环的时候需要用数据 ...
- picgo+typora优化markdown体验
picgo+typora优化markdown体验 写markdown的时候许多图片的存放的上传是一个大问题,之前一直都是使用先截图,在commit之后,再将线上图片地址粘贴到相应的位置 现在知道了pi ...
- JavaScript应懂的概念
目录 垃圾回收 函数作用域, 块级作用域和词法作用域 调用堆栈 原始类型 值类型和引用类型 隐式, 显式, 名义和鸭子类型 == 与 ===, typeof 与 instanceof this, ca ...
- springcloud-概念
springcloud-概念 一.架构演进过程 单体架构----分布式架构----SOA(eg.dubbo)服务治理架构----微服务 随着互联网的发展,需求的激增致使网站应用规模的扩大,最后转成了技 ...
- ELK-全文检索技术-lucene
ELK : ELK是ElasticSearch,LogStash以及Kibana三个产品的首字母缩写 一.倒排索引 学习elk,必须先掌握倒排索引思想, 参考文档: https://www.cn ...
- SpringBoot多数据源解决方案(转载)
1.开源项目地址:MyBatis Plus & Dynamic Datasource Maven配置: <dependency> <groupId>com.baomid ...
- Tomcat 使用jms 采集需要配置
Tomcat 使用JMS采集配置需要加入以后配置参数,本示例是在 eclipse 下启动tomcat中的配置. 在tomcat Arguments选择卡的VM arguments中加入: -Dcom. ...
- python redis之连接池的原理
python redis之连接池的原理 转载地址 什么是连接池 通常情况下, 当我们需要做redis操作时, 会创建一个连接, 并基于这个连接进行redis操作, 操作完成后, 释放连接, 一般情况下 ...
- 在控制台编译运行java程序详细指导
控制台编译运行.java文件 首先在cmd中输入java –version确定java环境变量是否已经配好 其次在cmd中输入javac –version 确定javac环境变量是否已经配好 在用cd ...