美文网首页
什么是BFC,和清除浮动的原理

什么是BFC,和清除浮动的原理

作者: 生活是什么呢 | 来源:发表于2017-10-23 13:40 被阅读0次

    bfc是什么


    bfc元素表现的特性就是一个独立的盒子,内部的子元素再怎么折腾都不会影响外部的元素和父元素,如果触发bfc,子盒子的margin和浮动不会对父盒子产生影响,所以可以用来清除浮动问题。

    什么情况下可以以触发bfc。

    • overflow:hidden 这种事最常用清除浮动的方法,在不会隐藏子
      元素内容的情况下
    • folat:left/right 但是这也会使父元素浮动
    • position:absolate/fixed 这种情况会使父元素脱离标准流,也不会占用位置
    • display:inline-block/table-cell 这种不常用

    清除浮动的原理

    <style>
            .clearfix:after{   //这种清除浮动使最常用的,它清浮动的
              原理是.son1的原理
                content:''; 这就相当于.son1元素里不放东西是一样
                display:block; //因为添加的伪元素默认为行内元素
                clear:both;
            }
            
            .father{
              width:300px;
              background-color:pink;
            }
            .son{
              width:100px;
              height:100px;
              background-color:green;
              float:left;  
            }
          .son1{
             clear:both;
                  //因为清除浮动的元素左右不和浮动的元素待在一起,
                  因此左右不能有浮动元素,
                  所以.son1这个子元素只能存在于.son元素的下面,
                  所以就把父元素的高度撑了起来 。
                  这种清除浮动有个不好的地方就是每次都要加一个div
                  标签。div默认为块级元素,所以不用加display:block
                  div里面没有东西,所以content:''不用写
          }
    </style>
    
    <div class='father'>
          <div class='son'></div>
          <div class='son1'></div>
    </div>
    

    相关文章

      网友评论

          本文标题:什么是BFC,和清除浮动的原理

          本文链接:https://www.haomeiwen.com/subject/tuzouxtx.html