css清除浮动

最新推荐文章于 2022-07-25 22:31:29 发布

elichan

最新推荐文章于 2022-07-25 22:31:29 发布

阅读量111

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/elichan/article/details/104742876

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

不清除浮动会导致内容高度塌陷，比如在浮动元素的父元素未设置高度的情况下，父元素会发生高度塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.a{
		background-color: blue
	}
	.b{
		float:left;
		height:200px;
		width:200px;
		background-color: yellow;
	}
	
	</style>
</head>
<body>
<div class="a">
	<div class="b"></div>
</div>
</body>
</html>

上述代码的执行结果如下图，a元素（class为a的div元素）是b元素（class为b的div元素）的父元素，未给a元素设置宽度，b元素向左浮动，导致a元素高度塌陷。

那么如何消除浮动呢？

方法一：在浮动元素下面加上一个空的元素，并给其附上css样式：{clear:both}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.a{
		background-color: blue
	}
	.b{
		float:left;
		height:200px;
		width:200px;
		background-color: yellow;
	}
	.c{
		clear:both;
	}
	</style>
</head>
<body>
<div class="a">
	<div class="b"></div>
	<div class="c"></div>
</div>
</body>
</html>

方法二：给浮动元素的父元素添加after伪元素（注意，这里是伪元素不是伪类，本人之前也写错了）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.a{
		background-color: blue;
		zoom:1;

	}
	.b{
		float:left;
		height:200px;
		width:200px;
		background-color: yellow;
	}
	.a:after{
		content: ".";
		clear:both;
		display: block;
		height:0;
		overflow: hidden;
		visibility:hidden;

	}
	</style>
</head>
<body>
<div class="a">
	<div class="b"></div>
</div>
	
</body>
</html>

content:"."是在父元素结尾添加一个“.”，height:0是为了不让前面的“.”显示出来，“clear: both;display: block; "是确保"."是非浮动的独立区块。

但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它

最终结果：

方法三：给浮动元素的父元素也添加浮动（但是这样做的话会使整体浮动，影响布局，所以不推荐）

方法四：给浮动元素的父元素设置overflow：hidden或者overflow:auto

参考：https://blog.csdn.net/nnnaix/article/details/54849680

elichan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清除浮动

不清除浮动会导致内容高度塌陷，比如在浮动元素的父元素未设置高度的情况下，父元素会发生高度塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ bac...
复制链接

扫一扫