BFC自适应布局

BFC(Block Formatting Context)块级格式化上下文。它是一个独立的渲染区域。

它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系。

块级元素:父级(是一个块元素)

内容:子元素(是一个块元素)

其他元素:与内容同级别的兄弟元素

相互作用:BFC里的元素与外面的元素不会发生影响

触发条件或者说哪些元素会生成BFC:

  满足下列条件之一就可触发BFC

  【1】根元素,即HTML元素

  【2】float的值不为none

  【3】overflow的值不为visible

  【4】display的值为inline-block、table-cell、table-caption

  【5】position的值为absolute或fixed  

BFC有哪些作用:

  1.自适应两栏布局

  2.可以阻止元素被浮动元素覆盖

         

  3.可以包含浮动元素——清除内部浮动

    通过改变高度塌陷的父盒子的属性值,使其成为BFC,以此来包含子浮动盒子。

           

  4.分属于不同的BFC时可以阻止margin重叠

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠

操作方法:给其中一个div外面包一个div,然后通过触发外面这个div的BFC,就可以阻止这两个div的margin重叠

              

FBC布局与普通文档流布局区别

普通文档流布局规则

1.浮动的元素是不会被父级计算高度

2.非浮动元素会覆盖浮动元素的位置

3.margin会传递给父级

4.两个相邻元素上下margin会重叠

BFC布局规则

1.浮动的元素会被父级计算高度(父级触发了BFC)

2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)

3.margin不会传递给父级(父级触发了BFC)

4.两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)

原文地址:https://www.cnblogs.com/xiaoan0705/p/9035637.html

时间: 2024-10-14 19:58:41

BFC自适应布局的相关文章

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言 要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是

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

一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻雨覆雨都不会影响外部的元素.所以,避免margin穿透.清楚浮动什么的也就好理解了. 什么时候出发BFC呢? 常见的情况如下: -> float 的值不为none ; -> overflow 的值为auto,scroll或hidden; -> display的

圣杯 双飞翼布局 多栏自适应布局BFC

七种实现左侧固定,右侧自适应两栏布局的方法 圣杯布局 双飞翼布局 圣杯布局和双飞翼布局 CSS深入理解流体特性和BFC特性下多栏自适应布局 块状元素的流体特性. 图片宽度一直width:100%,结果随着margin, padding, border的出现,其可用宽度自动跟着减小,形成了自适应效果.就像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间(box-sizing:border box;感觉) 然而,利用块状元素流体特性实现的自适应

content-box,border-box与width100%,BFC与自适应布局

1.content-box:with指其content   width100%的话往往会出现超出的情况 border-box;width指content+padding+borderwidth 现在一般都用border-box  width100%实现自适应布局 2.另外说说border与outline的区别  outline不占任何空间   并且不一定是矩形 width:auto对块级元素来讲就是占据整行 与height:auto 是指根据内容决定高度 3.bfc 块级格式化上下文 bfc元素

两列布局中单列定宽单列自适应布局的5种思路

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原

css 多栏自适应布局

在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师",我们应该需求一些优雅点的方法.先说说两栏布局,上例子: <div class='container' > <div class='div1' >1</div> <div class='div2' >2</div> </div> 如图,假如

(转转转)使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin

这可能是史上最全的CSS自适应布局总结

标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入! 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关的盒子模型,普通流.浮动.绝对定位三种定位机制,CSS3中的transform.弹性盒子模块.试验中的grid模块.逛园子的时候经常可以看到浮动布局,inline-block布局,弹性盒布局这几个名词.现在对布局也算有一点了解,做个总结巩固一下.如果你也看了很多资料,但是实际动手时对布局还是无从下手的