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

最新推荐文章于 2024-03-10 12:03:53 发布

渣猫略懂

最新推荐文章于 2024-03-10 12:03:53 发布

阅读量152

点赞数

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

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

版权

前端基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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>

渣猫略懂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础：清除浮动带来的影响

<!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; /* 子元素都浮动父级没有高度：给父级.
复制链接

扫一扫