清除浮动的五种方法

最新推荐文章于 2022-12-29 15:26:06 发布

小青龙8085

最新推荐文章于 2022-12-29 15:26:06 发布

阅读量216

点赞数

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104021520

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

我们在使用float的时候可能会遇见这种问题

那条黑线其实是红、黄、蓝这三个div的父级容器的边框，粉色为这个父级元素下面的一个div

解决这个问题的五种方法：

1、浮动元素后使用一个空元素

<div class="clear"></div>

.clear
{
	clear:both;
}

2、给浮动元素的容器添加overfloat ：hidden

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

3、给浮动元素的容器添加个类clearfix ，这个和第一种方法类似。

.clearfix:after{
				content: ".";
				height: 0;
				display: block;
				visibility: hidden;
				clear: both;
				zoom: 1;
			}

4、给父级元素定义一个height

border: 1px solid;
				height: 100px;

5、让父级元素也一起浮动，不推荐

.box{
	border: 1px solid;
	float: left;
}

下面使最上面图片的代码，感兴趣的可以根据上面的五种方法进行调试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			.box{
				border: 1px solid;
			}
			
			.box1{
				background-color: red;
				float: left;
				width: 100px;
				height: 100px;
			}
			.box2{
				background-color: yellow;
				float: left;
				width: 100px;
				height: 100px;
			}
			.box3{
				background-color: blue;
				float: left;
				width: 100px;
				height: 100px;
			}
			.box4{
				background-color: darksalmon;
				width: 500px;
				height: 200px;
			}
		</style>		
	</head>
	<body>
		<div class="box clearfix">
			<div class="box1">111</div>
			<div class="box2">222</div>
			<div class="box3">333</div>	
		</div>
		<div class="box4"></div>
	</body>
</html>

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的五种方法

我们在使用float的时候可能会遇见这种问题那条黑线其实是红、黄、蓝这三个div的父级容器的边框，粉色为这个父级元素下面的一个div解决这个问题的五种方法：1、浮动元素后使用一个空元素 <div class="clear"></div>.clear{ clear:both;}2、给浮动元素的容器添加overfloat ：hidden...
复制链接

扫一扫

专栏目录