[CSS]闭合浮动（清除浮动）clearfix

清疚 2022-11-26 06:53 179阅读 0赞

**一、为什么要闭合浮动（清除浮动）**  
一个父元素中有三个子元素（分别为黑粉紫色）  
父元素有分别为红色和蓝色的上下边框  
![在这里插入图片描述][20200810175659443.png]  
当给子元素加入float:left后  
![在这里插入图片描述][20200810175757685.png]  
由上下边框可以看出此时父元素的高度坍塌

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑
    开父盒子高度。  
    浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父
    盒子，父盒子高度为0。

代码：

<body>
        <div class="main">
            <div class="a float">
            </div>
            <div class="b float">
            </div>
            <div class="c float">
            </div>
        </div>
    </body>
    <style>
        * { 
            margin: 0;
            padding: 0;
        }
    
        .main { 
            width: 100%;
            border-top: 6px red solid;
            border-bottom: 6px blue solid;
        }
    
        .float { 
            float: left;
        }
    
        .a { 
            background: black;
            width: 60px;
            height: 60px;
        }
    
        .b { 
            background: pink;
            width: 60px;
            height: 60px;
        }
    
        .c { 
            background: purple;
            width: 60px;
            height: 60px;
        }
    
       
    </style>

**二、闭合浮动（清除浮动）后的效果**  
![在这里插入图片描述][20200810180024486.png]  
**三、闭合浮动（清除浮动）的方法**  
方案1（最常用的方式）：使用after伪类

.main:after{ 
            content:'';
            clear: both;
            display:block;
        }
    .main{ 
    		*zoom:1;/* 前面有*号的属性只有IE能识别，这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素 */
    }

方案2：给父元素加一个样式overflow:hidden

.main{ 
            overflow: hidden;
        }

方案3(不建议使用)：  
给父元素加一个子元素，并且给这个子元素加样式clear:both

.clear { 
            clear:both;
            /*图像的左侧和右侧均不允许出现浮动元素*/
        }

缺点：多了一个div盒子

*还有其他方法这里就不列举了，面试会三种方法就够用了，实际工作中一般都采取方案1*

[20200810175659443.png]: /images/20221124/c0b94832d47d4b6699f51e705aecbf4f.png
[20200810175757685.png]: /images/20221124/402eecf992404a2baebece958f978dd4.png
[20200810180024486.png]: /images/20221124/56651e5887bb4e51ab504ead0767a158.png