CSS基础：清除浮动带来的影响

最新推荐文章于 2024-10-12 21:28:26 发布

渣猫略懂

最新推荐文章于 2024-10-12 21:28:26 发布

阅读量192

点赞数

分类专栏：前端基础文章标签： css html5 html css3

本文链接：https://blog.csdn.net/weixin_52854090/article/details/120705023

版权

前端基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中关于浮动元素导致的父级高度塌陷问题及其解决方案，包括设置固定高度、使用`overflow:hidden`以及添加清除浮动的`<br>`标签和`::after`伪元素。通过实例展示了如何应用这些技术来实现布局的正常显示，同时讲解了`clear:both`属性的作用。此外，还提及了不同方法的优缺点和适用场景。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul,li{
				margin: 0;
				padding: 0;
			}
			#ul1{
				border: 1px solid #000000;
			
				/* 子元素都浮动父级没有高度：给父级标签设置高度 */
					height: 100px;
				/* 子元素都浮动父级没有高度：使用块级格式上下文清楚浮动带来的异常 */
					overflow: hidden;
			}
			ul>li{
				width: 100px;
				height: 100px;
				float: left;
				list-style: none;
			}
			ul>li:nth-child(1){
				background-color: #000000;
			}
			ul>li:nth-child(2){
				background-color: #0000FF;
			}
			ul>li:nth-child(3){
				background-color: #006400;
			}
			ul>li:nth-child(4){
				background-color: #00FFFF;
			}
			#div1{
				width: 200px;
				height: 200px;
				background-color: #98FB98;
				float: right;
			}
			#div2{
				width: 400px;
				height: 400px;
				background-color: #A52A2A;
			}
			/* 兄弟元素之间有元素浮动，对后面的兄弟元素产生了影响
			单独在浮动的元素后面加一个标签，该标签通过类设置清楚浮动样式属性 */
			.clear{
				/* 只有块级元素可以使用clear属性，为了保证当前元素是块级 */
				display: block;
				/* 当前标签不占位 */
				width: 0;
				height: 0;
				/* 元素透明度为0，让元素不显示 */
				opacity: 0;
				/* 让元素的内容也不占位 */
				line-height: 0;
				/* 元素隐藏 */
				visibility: hidden;
				/* 清楚浮动：属性值，left，清除左浮动，right，清除右浮动，both，清除左右浮动 */
				clear: both;
			}
			
			#ul2{
				border: 1px solid #000000;
			}
			/* 针对子元素浮动父元素没有高度，给当前元素添加动态伪类选择器 */
			#ul2::after{
				/* 动态为当前元素最后添加内容，content的值就是内容 */
				content: "";
				display: block;
				width: 0;
				height: 0;
				opacity: 0;
				line-height: 0;
				visibility: hidden;
				clear: both;
			}
		</style>
	</head>
	<body>
			<ul id="ul1">
				<li></li> <li></li>
				<li></li> <li></li>
			</ul>
			<br><br><br>
			<div >
				<div id="div1">
					
				</div>
				<span class="clear"></span>
				<div id="div2">
					
				</div>
			</div>
			<br><br><br>
			<ul id="ul2">
				<li></li> <li></li>
				<li></li> <li></li>
			</ul>
	</body>
</html>