css 浮动使用 及 清除浮动方法

浮动的介绍

浮动的作用

1.早期作用：文字环绕

2.现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右,同时也可以解决行内块元素之间的空隙

浮动的语法

 float: left;
   float: right;
   
        /* 1.加了浮动盒子会脱离标准流,不占位置
           2.浮动盒子半脱离状态,内容依然受到影响
           3.浮动的元素紧挨着前面浮动的元素,在前面浮动元素左右显示
           4.浮动盒子会受到上面元素的影响
           5.浮动元素有类似于行内块的特点,他一定不是行内块
           6.浮动盒子无法使用margin和text-align居中
        */
        
          /* 
        浮动的盒子依然会影响我们标准流盒子内容,这个状态叫半脱标状态
        */

清除浮动的介绍

清除浮动的目的是什么

/* 清除浮动:目的:给子元素浮动影响了的父元素加高度 */

 /* 清除浮动第一种方法,给父元素加高   不推荐*/
            /* height: 200px; */
         
         
         
            <!-- 额外标签法 使用一个div清除浮动 不推荐 -->
    <div class="clearfix"></div>
    .clearfix {
            /* 清除盒子的左右浮动 */
            clear: both;
        }
      
      
      
        /* 单伪元素清除法 */
        .clearfix::after {
            content: '';
            display: block;
            /* 清除左右浮动 */
            clear: both;
             <div class="top clearfix">
             
             
               /* 双伪元素清除法 ,推荐 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
            
        }

        .clearfix::after {
            clear: both;
            /* 解决浏览器的兼容性问题 */
            height: 0;
            line-height: 0;
            visibility: hidden;
        }
        <div class="top clearfix">
        
        
        
         /* 清除浮动 大力推荐 */

            /* 溢出隐藏 */
            overflow: hidden;