码迷,mamicode.com
首页 > 其他好文 > 详细

BFC布局

时间:2020-03-07 12:55:37      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:可视化   figure   上下   block   code   one   覆盖   区域   坍塌   

BFC(块级格式化上下文)

是web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互区域。

触发条件

  1. 根元素, 即HTML元素
  2. float的值不为none
  3. overflow的值不为visible
  4. display的值为inline-block, table-cell, table-caption
  5. position的值为absolute或fixed

布局规则

  1. 内部的box会在垂直方向, 一个接一个地放置(这点就是我们常见到的块级元素占一行)
  2. box的垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的margin会发生重叠, 与方向无关(垂直方向上的margin重合也就是我们常说的“坍塌现象”)
  3. 每个元素的margin box的左边, 与包含border box的左边相接触(对于从左往右的格式化, 否则相反). 即使存在浮动也是如此
  4. BFC的区域不会与float box重叠
  5. BFC就是页面上的一个隔壁的独立容器, 容器里面的子元素不会影响到外面的元素. 反之也如此
  6. 计算BFC的高度时, 浮动元素也参与计算

对比初学css时的规则

  1. block元素会扩展到与父元素同宽, 所以block元素会垂直排列
  2. 垂直方向上两个相邻的DIV margin重叠, 而水平方向上不会(这个说法就不完全正确)
  3. 浮动元素会接近左上方或右上方
  4. 为父元素设置overflow: hidden 或浮动元素, 则会包含浮动元素

初学CSS规则背后更深层次的概念其实就是BFC布局规则

作用

  1. 自适应的两栏布局
  2. 可以阻止元素被浮动元素覆盖
  3. 可以包含浮动元素——清除内部浮动
  4. 分属不同的BFC时可以阻止margin重叠

通过BFC实现两栏布局

1
2
3
4
5
大专栏  BFC布局class="line">6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
height: 100%;
width: 100%;
}
.left {
float: left;
height: 200px;
background-color: aquamarine;
width: 300px;
margin-right: 20px;
}
.right {
height: 300px;
background-color: blueviolet;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

BFC布局

标签:可视化   figure   上下   block   code   one   覆盖   区域   坍塌   

原文地址:https://www.cnblogs.com/lijianming180/p/12433328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!