写页面时会遇到:

  1. 子元素float父元素的高度不会撑开;
  2. 在布局时,box1and box2,其中box1 float:left,这是box2会在box1下面,(如果文字过多就会形成文字环绕效果),但我就是想要box2在box1的右侧;
  3. 又或是上下两个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的布局规则
滴滴滴...

  1. 内部的box会一个接一个地垂直布局。
  2. 两个相邻box的垂直距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个盒子的左外边框紧挨着左边框的包含块(从左往右的格式化时,否则相反)。即使存在浮动也是如此
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算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相关布局问题解决的更多相关文章

  1. 理解CSS中BFC

    BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...

  2. Linux Debugging(四): 使用GDB来理解C++ 对象的内存布局(多重继承,虚继承)

    前一段时间再次拜读<Inside the C++ Object Model> 深入探索C++对象模型,有了进一步的理解,因此我也写了四篇博文算是读书笔记: Program Transfor ...

  3. 理解socket.io(一)---相关的API

    理解socket.io(一)---相关的API 1. 什么是Socket.IO?Socket.IO是node.js的一个模块,它用于浏览器与服务端之间实时通信.它提供了服务器和客户端的组件,只需一个模 ...

  4. 实践中总结——理解haslayout和BFC

    1.HASLAYOUT 首先,haslayout翻译成中文就是:有布局. 所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位.这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局 ...

  5. 元素的BFC特性与自适应布局

    一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...

  6. 理解css的BFC

    BFC是CSS中一个看不见的盒子,(先理解CSS的盒子模型).它的页面渲染方式与普通流的盒子模型不同,它决定了其子元素将如何定位(所用属于BFC的box 都默认左对齐),以及和其他元素的关系和相互作用 ...

  7. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  8. 深入理解Magento – 第三章 – 布局,块和模板

    深入理解Magento 作者:Alan Storm 翻译:Hailong Zhang 第三章 – 布局,块和模板 我们接着研究Magento.根据我们第二章讲的Magento MVC的架构,我们接下来 ...

  9. 理解CSS3里的Flex布局用法

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...

随机推荐

  1. [BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表)

    [BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表) 题面 Byteasar 想在墙上涂一段很长的字符,他为了做这件事从字符的前面一段中截取了一段 ...

  2. linux源码下载

    概要:本文主要介绍ubuntu环境下,内核源码和命令源码的获取方式. 内核源码: 1.最简洁的方式,使用命令:apt-get source linux-$(uname -r).但配置的源服务器中不一定 ...

  3. mybatis映射文件mapper详解

    mapper.xml映射文件主要是用来编写sql语句的,以及一些结果集的映射关系的编写,还有就是缓存的一些配置等等. 1.<select>元素 <select>元素就是sql查 ...

  4. 修改MIGO或者ML81N产生的会计凭证项目文本增强

    在程序:MM07MFF9_F_BELEG_ERGAENZEN下做隐式增强

  5. 几个常用I/O函数用法(printf,fprintf等)

    一 格式化输出 1.printf 定义:int printf(const char *format,[argument]); 功能:产生格式化输出的函数(定义在 stdio.h 中) 参数说明:for ...

  6. 数据可视化之颜色,线型,maker

    https://blog.csdn.net/m0_37362454/article/details/82791527 https://blog.csdn.net/qiu931110/article/d ...

  7. Educational Codeforces Round 77 比赛总结

    比赛情况 我太菜了 A题 加减乘除不会 B题 二元一次方程不会 C题 gcd不会 就会一个D题二分答案大水题,本来想比赛最后一分钟来一个绝杀,结果 Wrong Answer on test 4 比赛总 ...

  8. Js中JSON.stringify()与JSON.parse()

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...

  9. SpringMVC的数据转换&&数据格式化&&数据校验

    1 SpringMVC的数据绑定流程 SpringMVC将ServletRequest对象及目标方法的入参实例传递给WebDataBinderFactory实例,以创建DataBinder实例对象. ...

  10. C语言做的句柄程序

    以vs2015为例---创建对话框程序  一直下一步,下一步,到最后 通过一个小型程序诸如 microsoft spy++我们可以获悉,窗口中失效按钮的句柄为0x00040AE8,由此我们可以给句柄发 ...