CSS3基础：清除浮动的四种方法

独憩

已于 2022-08-11 16:43:32 修改

阅读量254

点赞数

分类专栏：前端文章标签： css3 前端

于 2022-08-06 12:18:04 首次发布

本文链接：https://blog.csdn.net/qq_54517101/article/details/126192442

版权

前端专栏收录该内容

53 篇文章 5 订阅

订阅专栏

本文介绍了在CSS布局中，由于浮动元素可能导致的父级元素高度塌陷问题，以及四种常见的解决方案：额外标签法、overflow法、after伪元素法和双伪元素法。这些方法旨在确保父级元素能正确包裹其内的浮动子元素，保持页面布局的稳定性。

摘要由CSDN通过智能技术生成

有的时候，我们设置浮动时，都会选择先加一个大盒子，然后在大盒子里面放浮动的小盒子，而大盒子不限定其高度，例如：

    <style>
        .box{
            width: 300px;
            border: 1px solid red;
        }
        .small{
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="small">

        </div>
        
    </div>

这样就出现了问题：大盒子根本没有高度：

所以我们需要消除大盒子的浮动。

额外标签法：

在浮动盒子的最后加入 <div style="clear: both;"></div>

    <div class="box">
        <div class="box1"></div>/*浮动/
        <div class="box2"></div>/*浮动/
        <div style="clear: both;"></div>


    </div>

overflow法：

给父盒子样式添加overflow: hidden;

        .box{
            
            overflow: hidden;
            width: 500px;
            border: 1px solid red ;
        }

after伪元素法：

添加样式，需要父盒子引用clearfix类

		.clearfix:after{  
			content:".";  
			display: block;
			height: 0;
			line-height: 0;
			visibility: hidden;
			clear:both;  /*清除浮动*/
		}
		.clearfix{  /*兼容ie浏览器*/
			zoom:1;
		}

    <div class="box clearfix">
        <div class="box1"></div>/*浮动/
        <div class="box2"></div>/*浮动/
        <!-- <div style="clear: both;"></div> -->


    </div>

双伪元素法：

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

    <div class="box clearfix">
        <div class="box1"></div>/*浮动/
        <div class="box2"></div>/*浮动/
        <!-- <div style="clear: both;"></div> -->


    </div>