2021-09-26

忘记清除浮动

为什么要清除浮动

浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
这样下面的元素就会占据浮动元素的位置，会对后续的布局产生影响

清除浮动的方法

1.额外标签法

<div class="clear"></div>

2.父级添加 overflow 属性

overflow: hidden;

3.父级添加after伪元素

  .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1;
        }

4.双伪元素清除

   .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
        
        .clearfix::after {
            clear: both;
        }
        
        .clearfix {
          

伪类标签的作用对象

   <div class="a">
        
        <div class="b">

        </div>
    </div>
          

先把b盒子隐藏

   .b {
            height: 100px;
            width: 400px;
            background-color: powderblue;
            opacity: 0;
            border: 1px solid #000;
            /* b div 隐藏*/
        }
          

鼠标放到b盒子位置显示b

  .b:hover {
            opacity: 1;
            /* 鼠标经过 b  div 时 b div 显示*/
        }
          

鼠标放到a盒子显示b

  .a:hover .b {
            opacity: 1;
            /* 鼠标经过 a div 时 b div 显示*/
        }