CSS清除浮动

最新推荐文章于 2024-08-18 23:31:20 发布

「已注销」

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量122

点赞数

分类专栏： CSS学习知识点管理文章标签： css

本文链接：https://blog.csdn.net/gl767077147/article/details/78752575

版权

CSS学习知识点管理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浮动的特点:

浮动元素脱离标准文档流
创建浮动框使文本围绕图像

清除浮动的方法:

方法一：在末尾加上空div并设置clear

缺点：增加了无意义的标签

<style>
		#box{
			width: 600px;
			border:1px solid red;
		}
		#one{
			width: 100px;
			height: 100px;
			background-color: #000;
			float: left;
		}
		#two{
			width: 100px;
			height: 100px;
			background-color: #666;
			float: left;
		}
		#three{
			width: 100px;
			height: 100px;
			background-color: coral;
			float: left;
		}
		.clear{
			clear: both;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div class="clear"></div>
	</div>
</body>

方法二：给父元素设置高度

缺点:固定高度

#box{
width:600px;
height:400px;
border:1px solid red;
}

方法三:overflow属性

缺点:会产生滚动条

#box{
width:600px;
border:1px solid red;
overflow:hidden;
}

方法四:使用伪类:after

<div id="box" class="clear">
.clear:after{
			content: "";
			height: 0;
			visibility: hidden;
			display: block;
			clear: both;
		}

原理: 不希望新内容占据垂直空间和在页面显示，所以设置height:0,visibility:hidden;因为被清理的元素在它们的顶外边距添加了空间，所以需要将display设置为block

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS清除浮动

CSS清除浮动的方法
复制链接

扫一扫

专栏目录