BFC

标签：change   上下文   lock   ati   over   通过   Fix   哪些   play   

  解释：BFC——块级格式上下文，他是一个独立的渲染区域，与这个外部毫不相干

  能够触发BFC的条件有哪些：

  1，float 除了 none之外的属性

  2，position除了relative、static 之外的属性 absolute,fixed,

  3,  display属性为table,inline-block

  4，overflow 除了visible  之外的属性

BFC的作用

   1， 二个相邻的div，设置margin，会发生重叠，并且是最大的Margin

      pasting

1. <div class="aside"></div>
2. <div class="text">
3. <div class="main"></div>
4. </div>
5. <!--下面是css代码-->
6. .aside {
7. margin-bottom: 100px;//margin属性
8. width: 100px;
9. height: 150px;
10. background: #f66;
11. }
12. .main {
13. margin-top: 100px;//margin属性
14. height: 200px;
15. background: #fcc;
16. }
17. .text{
18. /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
19. overflow: hidden;//此时已经触发了BFC属性。

   2，可以清楚浮动的， 让元素保持在

   3，可以不让同级的盒子重叠 

1. 
   <div class="aside"></div>
2. <div class="text">
3. <div class="main"></div>
4. </div>
5. <!--下面是css代码-->
6. .aside {
7. width: 100px;
8. height: 150px;
9. float: left;
10. background: #f66;
11. }
12. .main {
13. height: 200px;
14. overflow: hidden;//触发main盒子的BFC
15. background: #fcc;
16. }
17. .text{
18. width: 500px;

BFC

标签：change   上下文   lock   ati   over   通过   Fix   哪些   play   

原文地址：https://www.cnblogs.com/yayaxuping/p/9672261.html