清除浮动的六种方法-优快云博客

本文链接：https://blog.youkuaiyun.com/Start_t/article/details/104396634

清除浮动的方法

1.overflow:hidden
2.clear:both 在最后面加一个空元素
3.利用伪元素 :after
4.display:table
5.父级一起浮动
6.overflow:auto

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

在这里插入图片描述

1.overflow:hidden

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;overflow:hidden;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

在这里插入图片描述

2.clear:both 在最后面加一个空元素

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
	.clearx{ clear:both;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	    <div class="clearx"></div>
	</div>
</body>

3.利用伪元素 :after

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
	.clearfx::after{ content: '';display: block;clear: both;}
</style>
//
<body>
	<div class="box clearx">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

4.display:table

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;display:table;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>

5.父级一起浮动

//--------样式--------
<style>
	.box{border:5px solid #000; width:500px;float:left;}
	.left{ float:left; background:#00f; height:100px; width:100px;}
	.right{ float:right; background:#0ff; height:200px; width:200px;}
</style>
//
<body>
	<div class="box">
		<div class="left"></div>
	    <div class="right"></div>
	</div>
</body>