zoukankan      html  css  js  c++  java
  • BFC

      解释: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;
    pasting

       

  • 相关阅读:
    vue 单页面应用 app自适应方案
    css3-3D特效
    css3动画-transition
    html5基本页面
    初入博客园
    网络部分之如何发送HTTP请求
    多线程知识之NSOperation的使用
    多线程知识点之GCD的使用
    多线程知识点之NSThread的使用
    plist 文件读写
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9672261.html
Copyright © 2011-2022 走看看