写页面时会遇到:

  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. C语言--浮点数

    在程序中使用浮点数 -- 浮点数的精确性有限 -- 在从c语言中float类型的精确度只到小数点的7位 -- 浮点数只能在一定范围内去相信它 -- 在有精确度高的要求下不要使用浮点数(在算钱的时候,误 ...

  2. tp5框架用foreach循环时候报Indirect modification of overloaded element of think\paginator\driver\Bootst错误

    thinkphp5使用paginator分页查询数据后,需要foreach便利处理某一字段的数据,会出现类似题目的错误.主要是因为tp5使用分页类读取的数据不是纯数组的格式!所以在循环的时候需要用数据 ...

  3. picgo+typora优化markdown体验

    picgo+typora优化markdown体验 写markdown的时候许多图片的存放的上传是一个大问题,之前一直都是使用先截图,在commit之后,再将线上图片地址粘贴到相应的位置 现在知道了pi ...

  4. JavaScript应懂的概念

    目录 垃圾回收 函数作用域, 块级作用域和词法作用域 调用堆栈 原始类型 值类型和引用类型 隐式, 显式, 名义和鸭子类型 == 与 ===, typeof 与 instanceof this, ca ...

  5. springcloud-概念

    springcloud-概念 一.架构演进过程 单体架构----分布式架构----SOA(eg.dubbo)服务治理架构----微服务 随着互联网的发展,需求的激增致使网站应用规模的扩大,最后转成了技 ...

  6. ELK-全文检索技术-lucene

    ELK   :  ELK是ElasticSearch,LogStash以及Kibana三个产品的首字母缩写 一.倒排索引 学习elk,必须先掌握倒排索引思想, 参考文档: https://www.cn ...

  7. SpringBoot多数据源解决方案(转载)

    1.开源项目地址:MyBatis Plus & Dynamic Datasource Maven配置: <dependency> <groupId>com.baomid ...

  8. Tomcat 使用jms 采集需要配置

    Tomcat 使用JMS采集配置需要加入以后配置参数,本示例是在 eclipse 下启动tomcat中的配置. 在tomcat Arguments选择卡的VM arguments中加入: -Dcom. ...

  9. python redis之连接池的原理

    python redis之连接池的原理 转载地址 什么是连接池 通常情况下, 当我们需要做redis操作时, 会创建一个连接, 并基于这个连接进行redis操作, 操作完成后, 释放连接, 一般情况下 ...

  10. 在控制台编译运行java程序详细指导

    控制台编译运行.java文件 首先在cmd中输入java –version确定java环境变量是否已经配好 其次在cmd中输入javac –version 确定javac环境变量是否已经配好 在用cd ...