BFC复习

01.   bfc可以解决哪些问题

      BFC是页面上的一个隔离的容器，容器里面的子元素不会影响父元素或者外面的元素

      BFC可以解决:

            1.父子外边距重合

            2.父元素高度坍塌

            3.元素被浮动元素覆盖

            4.兄弟元素上下外边距重合

            父元素的高度坍塌的问题

         

        如何触发元素的BFC？

          1.float的值不是none

          2.position的值不是static或者realtive

          3.display的值是inline-block、flex、或者inline-flex

         

02.  overflow的值有哪些

            overflow:hidden

              1.溢出隐藏

              2.清除浮动

              3.解决外边距坍塌

            overflow:visiable 显示滚动条（默认值 溢出显示）

            overflow:scroll 当内容的高度小于盒子的高度是也会显示滚动条

            overflow:auto 溢出自动加滚动条

03.  隐藏的形式有哪些，区别是什么？

      display:none 元素隐藏 且不占位置

      visibility: hidden 元素隐藏，仍然占位置

04.  写一个三角形

     父相对 子绝对

     height:30px

     width：30px

     border-right:20px solid green

     

05. 伪类选择器实现一个li的右边线

06.宽度自适应

     width：auto   padding margin  不会超出父元素

     width：100%  并且设置了 padding margin  会超出父元素

07.高度自适应0

     非浮动元素的高度自适应

       height:auto 不写

       min-height 当内容少或者没有内容是，有一个最小高度

                  当内容多的时候，以内容撑起父容器的高度

     浮动元素的高度自适应

        1. overflow:hidden

        2. 空标签

        3.万能清除法

       

/* 万能清除法 */

.clearfix::after {

    content: '';

    display: block;

    clear: both;

    overflow: hidden;

    visibility: hidden;

    height: 0;

}