马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
1.界说：
FC的全称为Formatting Conttext,元素在尺度流里面
块级元素的布局属于Block Formatting Context(BFC)——即block level box都是BFC中布局
行内级元素的布局属于Inline Formatting Context (IFC)
2.那么在哪些情况下会创建BFC？
- 根元素(<html>)
- 浮动元素（元素的float不是none)
- 绝对定位元素（元素的position为absolute或fixed)
- 行内块元素(元素的display为inline-block)
- overflow盘算值(Computed)不为visible的块元素
- 弹性元素（display为flex或inline-flex元素的直接子元素)
3.BFC特点：
- 在BFC中，box会在垂直方向上一个挨着一个的排布
- 垂直方向的间距由margin属性决定
- 在同一个BFC，相邻两个box之间的margin会折叠
- 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的
4.BFC作用：
5.BFC如何办理边距重叠标题？
给box1的父盒子设置一个overflow: auto;box1在container的BFC里面，box2还在html的BFC里面→两两互不影响
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- .container {
- overflow: auto;
- }
- .box1 {
- width: 500px;
- height: 200px;
- background-color: #582a2a;
- margin-bottom: 20px;
- }
- .box2{
- width: 500px;
- height: 200px;
- background-color: #582a2a;
- margin-top: 10px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="box1"></div>
- </div>
- <div class="box2"></div>
- </body>
- </html>
(1)BFC办理高度塌陷必要满意两个条件：
- 浮动元素的父元素触发BFC，形成独立的块级格式化上下文
- 浮动元素的父元素的高度是auto
(2)BFC高度是auto的情况下，如何盘算高度？
- 如果是inline-level,是行高的顶部和底部的间隔
- 如果有block-level,是由最顶层的块上边缘和最底层块盒子的下边缘之间的间隔
- 如果有绝对定位元素，将被忽略
- 如果有浮动元素，那么增加高度以包罗这些浮动元素的下边缘
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- .container {
- background-color:pink;
- /* 触发BFC */
- overflow: auto;
- }
- .item{
- width: 500px;
- height: 200px;
- border: 1px solid #000;
- float: left;
- background-color: #ff0;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
- </body>
- </html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
