BFC块级格式化上下文
2018-08-10 11:46:07来源：博客园 阅读 ()
规则
- 内部的Box会在垂直方向，一个接一个地放置。
- 属于同一个BFC的两个相邻Box的margin会发生重叠。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
- 计算BFC的高度时，浮动元素也参与计算
BFC触发原理
1 根元素 2 float属性不为none,例如left、right 3 position为absolute或fixed 4 display为inline-block, table-cell, table-caption, flex, inline-flex 5 overflow不为visible，例如hidden、auto
作用
- 清除浮动,BFC里面的浮动元素高度也会参与计算
<div class="layout"> <div></div> <div></div> </div>
如果里面的两个div为浮动，那么设置 .layout {overflow: hidden}
2. 防止margin重叠
总结：
BFC通俗地说：就是一个容器，里外不相互影响，记住：清除浮动的时候，如果使用 overflow： hidden，是存在缺点的，如果超过了范围，那么则被隐藏了
清除浮动正确的方式：
.clearfix:after{
content: '',
height: 0;
display: block;
visibility: hidden;
clear: both;
line-height:0;//行高为0
}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：JS原型链
- [04]HTML基础之块级标签 2020-06-01
- Layer UI表格列日期格式化及取消自动填充日期 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
- 整理高度塌陷与BFC 2020-05-06
- HTML字符实体与文本格式化标签 2020-03-30
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
