css中的clear属性

最新推荐文章于 2023-12-23 13:55:14 发布

忆昔年.

最新推荐文章于 2023-12-23 13:55:14 发布

阅读量483

点赞数

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/rt5476238/article/details/85267793

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

所有主流浏览器都支持 clear 属性。

clear 属性规定元素的哪一侧不允许其他浮动元素。

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
			可选值：
				none，默认值，不清除浮动
				left，清除左侧浮动元素对当前元素的影响
				right，清除右侧浮动元素对当前元素的影响
				both，清除两侧浮动元素对当前元素的影响
					清除对他影响最大的那个元素的浮动

clear属性也可以用来解决高度坍塌问题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	/*解决高度塌陷：
			可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
			然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
			使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构*/
			.box1{
			border: 1px solid red;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: blue;
			float: left;
		}
		.clear{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box1 clearfix">
		<div class="box2"></div>
		<div class="clear"></div>
	</div>
</body>
</html>

然而这样会多出一个多余的块，
可以用after选择div中的最后一个元素，然后给它设置以下代码

.clearfix:after{
			/*添加一个内容*/
			content: "";
			/*转换为一个块元素*/
			display: block;
			/*清除两侧的浮动*/
			clear: both;
		}

在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理

忆昔年.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css中的clear属性

所有主流浏览器都支持 clear 属性。clear 属性规定元素的哪一侧不允许其他浮动元素。我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能可选值： none，默认值，不清除浮动 left，清除左侧浮动元素对当前元素的影响 right，清除右侧浮动元素对当前元素的影响 both，清除两侧浮动元素对当前元素的影响 ...
复制链接

扫一扫