欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS浮动与清除浮动

程序员文章站 2022-03-29 19:59:59
...

CSS浮动与清除浮动

1.CSS浮动

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

img{
float:left
}

添加浮动前,文字行基线和图片对齐。
CSS浮动与清除浮动
添加浮动后,文字包围图片。

CSS浮动与清除浮动
添加浮动前,图片之间会有莫名其妙的间隔
CSS浮动与清除浮动
添加浮动后,图片进行向左浮动
CSS浮动与清除浮动
浮动可以设置元素,脱离正常的文档流,向左或者向右,靠近父元素边缘或者是设置了浮动的其他元素的边缘

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

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

CSS浮动与清除浮动
解决方案:
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>

相关标签: CSS css html