理解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 ...
随机推荐
- [BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表)
[BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表) 题面 Byteasar 想在墙上涂一段很长的字符,他为了做这件事从字符的前面一段中截取了一段 ...
- linux源码下载
概要:本文主要介绍ubuntu环境下,内核源码和命令源码的获取方式. 内核源码: 1.最简洁的方式,使用命令:apt-get source linux-$(uname -r).但配置的源服务器中不一定 ...
- mybatis映射文件mapper详解
mapper.xml映射文件主要是用来编写sql语句的,以及一些结果集的映射关系的编写,还有就是缓存的一些配置等等. 1.<select>元素 <select>元素就是sql查 ...
- 修改MIGO或者ML81N产生的会计凭证项目文本增强
在程序:MM07MFF9_F_BELEG_ERGAENZEN下做隐式增强
- 几个常用I/O函数用法(printf,fprintf等)
一 格式化输出 1.printf 定义:int printf(const char *format,[argument]); 功能:产生格式化输出的函数(定义在 stdio.h 中) 参数说明:for ...
- 数据可视化之颜色,线型,maker
https://blog.csdn.net/m0_37362454/article/details/82791527 https://blog.csdn.net/qiu931110/article/d ...
- Educational Codeforces Round 77 比赛总结
比赛情况 我太菜了 A题 加减乘除不会 B题 二元一次方程不会 C题 gcd不会 就会一个D题二分答案大水题,本来想比赛最后一分钟来一个绝杀,结果 Wrong Answer on test 4 比赛总 ...
- Js中JSON.stringify()与JSON.parse()
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...
- SpringMVC的数据转换&&数据格式化&&数据校验
1 SpringMVC的数据绑定流程 SpringMVC将ServletRequest对象及目标方法的入参实例传递给WebDataBinderFactory实例,以创建DataBinder实例对象. ...
- C语言做的句柄程序
以vs2015为例---创建对话框程序 一直下一步,下一步,到最后 通过一个小型程序诸如 microsoft spy++我们可以获悉,窗口中失效按钮的句柄为0x00040AE8,由此我们可以给句柄发 ...