网页基础（十九）清除浮动

最新推荐文章于 2022-11-24 11:37:35 发布

@大娱乐家

最新推荐文章于 2022-11-24 11:37:35 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104638042

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动</title>
		<!--
			clear:both; 清除左右浮动
        	1.父元素没有设置高度 那么他的高度就是一个没有浮动的内容撑起来的
        	2.如果主元素设置了浮动，脱离了标准文档流 那么父元素的高度将被忽略
        	3.如果不清楚浮动 父元素就会出现高度不够 那样的话背景属性将得不到正确的解析
        	4.清除浮动影响的是元素本身 清除的该元素左右的浮动 只能对块元素有效
        	
        -->
		<style>
			.box{
				border: 1px solid black;
				padding: 50px;
			}
			.a{
				width: 50px;
				height: 50px;
				background-color: red;
				float: left;
			}
			.b{
				width: 50px;
				height: 50px;
				background-color: blue;
				float: left;
			}
			.c{
				width: 50px;
				height: 50px;
				background-color: greenyellow;
				float: left;
			}
			.d{
				width: 50px;
				height: 50px;
				background-color: pink;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="a">a</div>
			<div class="b">b</div>
			<div class="c">c</div>
			<div class="d">d</div>
		</div>
	</body>
</html>

如果不加清除浮动clear: both;会产生什么影响

所以得到：

            1.父元素没有设置高度那么他的高度就是一个没有浮动的内容撑起来的
           2.如果主元素设置了浮动，脱离了标准文档流那么父元素的高度将被忽略
           3.如果不清楚浮动父元素就会出现高度不够那样的话背景属性将得不到正确的解析
           4.清除浮动影响的是元素本身清除的该元素左右的浮动只能对块元素有效

@大娱乐家

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页基础（十九）清除浮动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <!-- clear:both; 清除左右浮动 1.父元素没有设置高度那么他的高度就是一个没有浮动的内容撑起来的 2...
复制链接

扫一扫