CSS清除浮动的4种方法

最新推荐文章于 2022-11-23 20:02:54 发布

想成为大佬的鸭子

最新推荐文章于 2022-11-23 20:02:54 发布

阅读量119

点赞数

分类专栏： CSS 文章标签： CSS 清除浮动

本文链接：https://blog.csdn.net/weixin_41309331/article/details/97900756

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

浮动在开发中非常常用，用来使浮动元素脱离文档流进行左浮或者右浮，直到碰到父级元素或者其他的浮动元素。

但是浮动也会产生一些问题，会对前后的标签产生影响，如我们想实现下面的效果：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.dv{
				width: 150px;
				height: 150px;
				/* 添加左浮动 */
				float: left;
			}
			.div1{
				background-color: yellow;
			}
			.div2{
				background-color: orangered;
			}
			.div3{
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="dv div1"></div>
			<div class="dv div2"></div>
			<div class="dv div3"></div>
		</div>
		<p>我是一段想要独占一行的文字</p>
	</body>
</html>

但是执行结果如下：

可以发现，本来应该独占一行的p内容，却和三个div同行了，这是由于三个div的浮动脱离了文档流导致的。

清除浮动的4种方法

（1）给父元素添加高度height

.box{
	height: 150px;
}

给父元素添加 height 解决了父元素无法自动获取高度的问题。

但是这种方法只适合高度固定的布局，因为要给出精确的高度，如果高度和父级div不一样时，会产生问题。

（2）结尾处添加div标签，样式为clear:both

.div4{
	clear: both;
}

不推荐使用，需要在布局中添加新的元素。

（3）触发BFC

设置父元素display为inline-block或table

.box{
	display: table;
    /*或 display: inline-block*/
}

不推荐使用,改变了父级div的属性,会产生一些新的问题;

父级元素也一起浮动

不推荐使用,会产生新的浮动问题

父级元素overflow不为visible

.box {
	overflow: auto;
	/* overflow: hidden; */
}

不推荐使用,不能定义height,浏览器会自动检查浮动区域的高度,容易出现滚动条

(4) 常用:伪元素和zoom

.box::after,.box::before{
	content: "";
	display: block;
	line-height: 0px;
	height: 0px;
	clear: both;
	visibility: hidden;
}
.box{
	/* 解决IE兼容问题 */
	zoom: 1;
}

推荐使用,常用语公共类,节省代码

想成为大佬的鸭子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS清除浮动的4种方法

浮动在开发中非常常用，用来使浮动元素脱离文档流进行左浮或者右浮，直到碰到父级元素或者其他的浮动元素。但是浮动也会产生一些问题，会对前后的标签产生影响，如我们想实现下面的效果：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title><...
复制链接

扫一扫