清除浮动的四种方法

原创于 2022-01-06 07:56:07 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bash #前端 #开发语言

本文详细介绍了如何通过额外标签法、父级overflow属性、伪元素技巧以及双伪元素清除浮动，来避免子元素浮动导致的父元素高度塌陷问题。实例演示了每种方法的使用场景和CSS代码实现。

清除浮动原因

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

清除浮动的四种方法

额外标签法
谁清除浮动，就在其后额外添加一个空白标签

// 要给small清除浮动，small后添加一个空白标签clear(类名可以随意），设置clear:both;即可
<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear {
	clear:both;
}

父级添加overflow属性

//可以通过触发BFC的方式，实现清除浮动效果
必须定义width或zoom:1，同时不能定义height
.father {
	width:400px;
	overflow:hidden;
}

注意：别加错位置，是给父级加（并不是所有的浮动都需要清除，谁影响布局，才清除谁）

使用after伪元素清除浮动

.clearfix:after{
	content: "";
	display: block;
	height: 0;
	clear:both;
}
 

<div class="father clearfix">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>

使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
	content: "";
	display: block;
	clear: both;
}

<div class="father clearfix">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>