CSS浮动与清除浮动

最新推荐文章于 2022-08-01 00:19:33 发布

CodeYu_

最新推荐文章于 2022-08-01 00:19:33 发布

阅读量189

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/Aiolimp/article/details/108210606

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS浮动与清除浮动

1.CSS浮动

浮动的作用：
1.1 浮动可以解决文字包围图片的问题
1.2 浮动可以解决div之间的间隔问题
1.3 浮动可以向左或者向右进行排版布局

img{
float：left
}

添加浮动前，文字行基线和图片对齐。
在这里插入图片描述
添加浮动后，文字包围图片。

在这里插入图片描述
添加浮动前，图片之间会有莫名其妙的间隔

添加浮动后，图片进行向左浮动

浮动可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素边缘或者是设置了浮动的其他元素的边缘

2.CSS浮动的高度塌陷问题

当父元素高度设置为0时，子元素浮动脱离文档流，h1标签的内容和子元素处于同一行。

在这里插入图片描述
解决方案：
1.设置父元素高度
2.子元素添加div，清除左右浮动

        .clear{
			clear: both;//元素左右两侧均不允许浮动
		}

3.最佳解决方案，伪元素清除浮动。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.parent{
			width: 400px;
			/* height: 300px; */
			margin: 0 auto;
			background: deeppink;
		}
		.child{
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: aqua;
			float: left;
		}
		/* .clear{
			clear: both;
		} */
		.clear:after{
			content: "";
			display:block;
			clear:both;//元素左右两侧均不允许浮动
		}
	</style>
	<body>
		<div class="parent clear">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="clear"></div>
		</div>
		<h1>Skrrrrrrrr</h1>
	</body>
</html>

CodeYu_

关注

0
点赞
踩
0

收藏

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

CSS浮动与清除浮动1.CSS浮动浮动的作用：1.1 浮动可以解决文字包围图片的问题1.2 浮动可以解决div之间的间隔问题1.3 浮动可以向左或者向右进行排版布局img{float：left}添加浮动前，文字行基线和图片对齐。添加浮动后，文字包围图片。添加浮动前，图片之间会有莫名其妙的间隔添加浮动后，图片进行向左浮动浮动可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素边缘或者是设置了浮动的其他元素的边缘2.CSS浮动的高度塌陷问题当父元素高度设置为0时，子元
复制链接

扫一扫

专栏目录