清除浮动

最新推荐文章于 2025-06-02 17:01:47 发布

原创最新推荐文章于 2025-06-02 17:01:47 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了解决父元素因内部浮动元素而出现的高度塌陷问题的方法，包括使用overflow:hidden、clearfix技术及在父元素后添加带有clear:both样式的空div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.关于清除浮动有一个相关的元素：clear

2.它的作用：规定元素的某侧不允许存在浮动元素

3.应用：清除其他浮动元素对其产生的影响

4.它对应的值：

both	两侧都不允许存在浮动元素
left	清除元素左侧的浮动元素
right	清除元素右侧的浮动元素
none	无清除效果(默认值)

5.解决实际中的应用：

问题描述：父元素中只包含浮动元素，那么在未设置高度的同时，则父元素高度就会塌陷为零

解决办法：

1.直接给父元素设置：overflow:hidden

2.给父元素添加一个css样式类：

.clearfix{zoom:1 ;} //这是为了兼容IE浏览器

.clearfix :after{content:“.”;//:after伪对象选择符---这个对象被渲染后添加一定的内容

display:block;//添加进去的内容转换为块状元素

visibility:hidden ;//将元素设置为不可见，但无论是否可见，都保留其物理空间

height:0;//将添加进去的内容高度设置为0，清除其占位

clear:both；//将添加进去的内容作为清除浮动的对象，实现外围容器中有内容存在

}

3.在父级元素中，浮动元素的后面加一个空的div,并给它设置clear:both,

//css部分
<style>
.boss{
		border:3px solid green;

	}
		.l{
			width:200px;
			height:200px;
			background:purple;
			float:left;
		}
		.r{
			width:200px;
			height:200px;
			background:red;
			float:right;
		}
		.extra{
			clear:both;
		}
	</style>

//HTML部分
<body>
<div>
	<div class="boss">
		
		<div class="l">
			左边
		</div>
		<div class="r">
			右边
		</div>
		<div class="extra"></div>
	</div>
</div>
<script type="text/javascript">
</script>
</body>

最终效果：