当前位置 博文首页 > 大曾blog：DaZeng：BFC的概念、触发、作用及应用
1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。
2、清除浮动（好像是五种还是六种方式）
3、BFC（概念、触发、作用、应用）
4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下）
5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行）
6、轮播图:js原生做弄清楚原理有箭头，实现了写导航点自动播放然后无缝
注:就是不是让你全背下来，但是常用的要会，不能写什么都要翻文档，菜鸟或者w3c都可以 。
上一篇：清除浮动
首先BFC全名Block Formatting Contexts 中文意思就是块级格式上下文。
举例：如果一串代码margin重叠是什么样子呢？
HTML:
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
CSS:
<style>
div{
width: 100px;
height: 100px;
border: 2px solid black;
}
.one,.two,.three{
margin: 100px 0;
}
</style>
图示：每两个div间隔尽然不是200px，而是100px，说明产生了重叠。
就是说BFC是一个独立的盒子只有block-level box（块级盒子）可以创建BFC，它规定了这个块级盒子的内部布局，最最最重要的是，这个独立的盒子里面的布局既不会受外面的影响，也不会影响到外面的元素。
float( left | right )除了noneoverflow( hidden | auto | scroll )除了visibledisplay( inline-block | inline-flex | table-cell | table-captition )position( absolute | fixed )<绝对定位，固定定位>a.清除浮动
b.阻止边距重叠
例：
html:
<body>
<div class="container">
<div class="p1"></div>
</div>
<div class="container">
<div class="p1"></div>
</div>
</body>
css:
<style>
.container {
overflow: hidden;
}
.p1 {
width: 100px;
height: 100px;
border: 2px solid black;
margin: 100px;
}
</style>
BFC实现：
c.用于自定义布局
下一篇：居中问题
cs