日常笔记,便于加深记忆

1.CSS中哪些情况下会生成BFC?BFC有哪些特征?

  谈起BFC,对于基础不怎么好的我,首先映入脑海的是块级格式化上下文,然后就只能零零散散记起一些.在这里做一个系统的参考便于自己加深影响,受到一些大佬的文章指导链接.中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。 也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。(在 CSS3 中,BFC 叫做 Flow Root)

  在了解BFC之前,首先得知道Box和Formatting Contex概念

  1.Box模型

        所谓的盒模型不外乎,margin,border,padding,content,(这里就不多做解释了)

  2.Formatting Contex

        格式化上下文指的是初始化元素定义的环境。包含两个要点,一个是元素定义的环境,一个是初始化。

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用..。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

 CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

  现在来谈谈BFC的触发条件吧

  • 根元素,即最大的HTML元素

  • float值不为none

  • overflow不为visable

  • display的值为inline-block、table-cell、table-caption

  • position为absolute或fixed

只要满足其中一条就可以触发

BFC布局规则:

  • 1.内部的Box会在垂直方向,一个接一个地放置。

    2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

    3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

    4.BFC的区域不会与float box重叠。

    5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

    6.计算BFC的高度时,浮动元素也参与计算

 BFC的作用

1.不和浮动元素重叠

.left{
width: 100px;
height: 50px;
background-color: black;
float: left;
}
.right{
background: #090;
width: 200px;
height: 100px;
}
 
<body>
<div class="left"></div>
<div class="right"></div>
</body>

给right清除浮动后(overflow:hidden)

2.自适应两栏布局

<style>
* {
margin: 0;
padding: 0;
}
.container {
}
.float {
width: 200px;
height: 100px;
float: left;
background: red;
opacity: 0.3;
}

.main {
background: green;
height: 100px;
overflow: hidden;
}
</style>

<div class="container">
<div class="float">
浮动元素
</div>
<div class="main">
自适应
</div>
</div>

 

 

猜你喜欢

转载自www.cnblogs.com/Tonyhao/p/11185080.html
0条评论
添加一条新回复