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

最新推荐文章于 2023-10-21 21:46:54 发布

DaftJayee

最新推荐文章于 2023-10-21 21:46:54 发布

阅读量229

点赞数

分类专栏： css 前端面试题

本文链接：https://blog.csdn.net/qq_43540219/article/details/107918721

版权

前端面试题同时被 2 个专栏收录

67 篇文章 3 订阅

订阅专栏

css

28 篇文章 0 订阅

订阅专栏

一、为什么要闭合浮动（清除浮动）
一个父元素中有三个子元素（分别为黑粉紫色）
父元素有分别为红色和蓝色的上下边框
在这里插入图片描述
当给子元素加入float:left后

由上下边框可以看出此时父元素的高度坍塌

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

二、闭合浮动（清除浮动）后的效果
在这里插入图片描述
三、闭合浮动（清除浮动）的方法
方案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

<div class="main">
        <div class="a float">
        </div>
        <div class="b float">
        </div>
        <div class="c float">
        </div>
        <div class="clear"> 
        <!--新加的子元素-->
        </div>
    </div>

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

缺点：多了一个div盒子

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

DaftJayee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[CSS]闭合浮动（清除浮动）clearfix

一、为什么要闭合浮动（清除浮动）一个父元素中有三个子元素（分别为黑粉紫色）父元素有分别为红色和蓝色的上下边框当给子元素加入float:left后由上下边框可以看出此时父元素的高度坍塌标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。代码：<body> <div class="main"> <d
复制链接

扫一扫