CSS清除浮动方法

最新推荐文章于 2022-07-25 22:31:29 发布

置顶落花别有意流水似无情

最新推荐文章于 2022-07-25 22:31:29 发布

阅读量121

点赞数

分类专栏： CSS 文章标签： CSS清除浮动

本文链接：https://blog.csdn.net/weixin_42931825/article/details/102663028

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、在浮动元素后面添加一个空的标签，并且让这个标签样式为：clear:both;

2、父元素直接设置一个高度，放置子元素高度超过父元素高度，无法正常显示

3、父元素overflow:hidden；超出的部分隐藏，但是有一个缺点，当内部浮动元素过多的时候就会造成多出的浮动元素不会自动换行，从而造成超出内容的元素显示不出来；

4、伪类元素:after清楚浮动，其实和第一个方法原理类似如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
		.Content{
			background: blue;
			width: 400px;
		}
		.left{
			float: left;
			width: 100px;
			height: 100px;
			background: red;
		}
		.right{
			float: right;
			width: 100px;
			height: 50px;
			background: yellow;
		}
		.father:after{
			 content:"."; clear: both; height: 0; overflow: hidden; visibility: hidden; display: block
		}
		.father{
			zoom: 1;
		}
	</style>
</head>
<body>
	<div class="Content father">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>
</html>

结果：

这样即使父元素没有设置高度，也可以让子元素撑起父元素得高度，完成清楚浮动；

落花别有意流水似无情

关注

0
点赞
踩
2

收藏

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

1、在浮动元素后面添加一个空的标签，并且让这个标签样式为：clear:both;2、父元素直接设置一个高度，放置子元素高度超过父元素高度，无法正常显示3、父元素overflow:hidden；超出的部分隐藏，但是有一个缺点，当内部浮动元素过多的时候就会造成多出的浮动元素不会自动换行，从而造成超出内容的元素显示不出来；4、伪类元素:after清楚浮动，其实和第一个方法原理类似如下：...
复制链接

扫一扫