清除浮动的方法-CSDN博客

本文链接：https://blog.csdn.net/weixin_52019215/article/details/114239781
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 浮动

         css三种布局机制
             1 --普通流(标准流)
                 - 块级元素会独占一行，从上向下顺序排列；
                    常用元素：div hr p h1-h6 ul ol dl form table
                 - 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行
                    常用元素：span a i em等
             2 --浮动
                  - 让盒子从普通流中浮起来，主要作用是让多个块级盒子在一行显示
             3 --定位
                  - 将盒子定在浏览器的某一个位置 css离不开定位 特别是后面的js特
             为什么需要浮动
              --为了让块级元素一行显示
                  -但是我们可以将块级元素转换成行内块元素display:inline-block;从而实现块级元素一行显示
                  -但是行内块元素之间从中一些间隙，不好处理，即使处理掉也存在兼容性问题，故需要浮动
                  -而浮动就可以将块级元素在一行显示，而且彼此之间不存在间隙
                  
         浮动概念：
                 设置了浮动属性的元素会
                    1 脱离标准流控制；
                    2 移动到指定位置
        浮动作用：
                1 让多个盒子水平排列一行，浮动成为布局的重要手段
                2 可以实现盒子左右对齐等；
                3 浮动最早用来控制图片，实现问题环绕图片的效果。

        浮动语法：
                选择器 {float: 属性值;}
                属性值：
                       none 表示元素不浮动
                       left 表示元素左浮动
                       right 表示元素右浮动         
        浮动元素特性：
                1 浮动：浮动元素漂浮在普通流上面 脱离标准流了
                2 浮动的盒子不占有原来的位置，把位置流给后面标准流元素，俗称 脱标
                3 float属性会改变元素display属性 块级元素添加浮动后将会拥有行内块元素的特性(1宽度由元素内的内容决定 2可以在一行显示 这也是浮动为什么能在一行显示的原理)
                4 多个盒子同时添加浮动将在一行显示，且之间没有间隔，而行内块元素有间隔(区别)
                5 如果父级宽度装不下这些浮动的盒子的宽度(即浮动的盒子宽度加起来超过父亲宽度) 多出的浮动盒子将在另一行对齐

        浮动元素与父级元素盒子之间的关系
                1 浮动的子盒子位置参照父盒子对齐
                2 浮动的子盒子不会与父盒子边框重叠，也不会超过父盒子内边距
                  

        浮动盒子与兄弟盒子关系：
                -- 在父级盒子中 当前元素浮动，
                   - 若前一个盒子也浮动 那么当前浮动的元素盒子与前一个顶部对齐
                   - 若前一个盒子不浮动 那么当前浮动盒子在前面标准流盒子下面显示
                -- 所以浮动只会影响当前或者后面的盒子，不会影响前面的标准流

        清除浮动
                为什么要清除浮动
                   -- 在通常的布局中我们需要利用浮动和标准流结合使用
                      但是浮动元素不保留原来位置，影响后面标准流元素的布局
                      故将浮动元素放到标准流父级元素中，但是父级盒子很多情况下不方便给高度，这样导致
                      里面的浮动盒子不占位置，父级盒子将失去高度，影响下面标准流盒子布局
                      标准流中父盒子高度不给的话，会按照子盒子高度撑开
                清除浮动的本质
                   -- 清除浮动主要是解决父级元素以为子级元素浮动导致高度为0的情况
                      清除浮动之后，父级盒子会自动检测子盒子高度，父级盒子有了高度
                      就不会影响下面的标准流布局了
                清除浮动方法：
                   -- 语法：
                         选择器{clear: 属性值} 属性值有left right both
                    - 方法1 额外标签法：是W3C推荐的做法，是通过在浮动元素末尾添加一个空标签
                       <div style="clear: both"></div>   缺点：增加额外标签  
                    - 方法2 父级添加overflow属性 可以给父级添加overflow为hidden auto scroll 都可以实现
                             优点：代码简洁   缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的部分的元素
                    - 方法3 使用after伪元素清除浮动
                              :after方式为空元素额外标签法的升级版，好处是不用单独加标签
                              使用方法：
                              .clearfix:after { 
                                               content:"";
                                               display:block;
                                               height:0;
                                               clear:both;
                                               visibility:hidden;
                                              }
                               .clearfix {
                                           IE6、7专用
                                          *zoom:1;
                               }    
                    - 方法4 使用双伪元素清除浮动
                             代码：
                             .clearfix:before,
                             .clearfix:after {
                                 content:"";
                                 display: table;
                             }           
                             .clearfix:after {
                                 clear: both;
                             }
                             .clearfix {
                                 *zoom:1;
                             }

            什么情况下需要清除浮动总结：
               1 父级没有高度
               2 子盒子有浮动
               3 影响下面布局
                   */
        /* div {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: #000;
        }
        
        .two {
            background-color: pink;
        }
        
        .top {
            float: left;
            width: 300px;
            height: 300px;
            background-color: green;
        }
        
        .button {
            display: block;
            width: 500px;
            height: 500px;
            background-color: blue;
        } */
        
        .box1 {
            /* 块级元素不给宽度默认和浏览器一样宽 */
            /* 添加一个浮动 */
            float: left;
            height: 50px;
            background-color: #456464;
        }
        
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: #654546;
            float: left;
        }
        
        .right {
            float: right;
        }
        
        .father {
            padding: 50px;
            border: 20px solid red;
            width: 500px;
            height: 500px;
            background-color: #645645;
        }
        
        .son {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .one {
            /* 清除浮动方法2  */
            /* overflow: hidden; */
            border: 1px solid red;
            width: 500px;
            /* height: 500px; */
            margin: auto;
        }
        
        .boxA,
        .boxB {
            float: left;
            width: 250px;
            height: 250px;
            background-color: #645666;
        }
        
        .boxB {
            background-color: pink;
        }
        
        .two {
            width: 800px;
            height: 200px;
            background-color: blue;
            margin: auto;
        }
        /* 清除浮动方法1：额外标签法 */
        
        .clear {
            clear: both;
        }
        /* 清除浮动方法3 声明清除浮动样式 */
        /* .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        
        .clearfix {
            IE6 7 专门清除浮动样式
            *zoom: 1;
        } */
        /*清除浮动方法4 双伪元素清除法*/
        
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>

<body>
    <!-- <div></div>
    <div class="two"></div>
    <div></div>
    <div class="top"></div>
    <div class="button"></div>
    <div class="box1">123</div>
    <div class="left"></div>
    <div class="right"></div> -->
    <!-- <div class="father">
        <div class="son"></div>
    </div> -->
    <div class="one clearfix">
        <div class="boxA"></div>
        <div class="boxB"></div>
        <!-- <div class="clear"></div> -->
    </div>
    <div class="two"></div>
</body>

</html>