解决float元素父元素高度为0的代码&根据浏览器版本引用js代码，代码备用

最新推荐文章于 2022-10-08 13:29:23 发布

likingsn

最新推荐文章于 2022-10-08 13:29:23 发布

阅读量866

点赞数

分类专栏： HTML JavaScript CSS 文章标签： float元素父元素浮动元素父元素浮动元素父元素清除根据浏览器版本引用js

本文链接：https://blog.csdn.net/likingsnblog/article/details/45696041

版权

JavaScript 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

我们知道当使用float的元素（即浮动元素）不会影响父元素的高度，更深入的说，浮动元素不是文档流的一部分。

有时候会带来一些问题，比如我们希望为父元素设置背景颜色，由于父元素的高度为0，所以背景颜色不能显示，为了解决这个问题，定义一个类clearfix，使父元素清除float带来的影响，css代码如下：

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

在父元素中引用该类即可，这样做的效果就是浮动元素的祖先元素在高度上包含浮动元素，并消除了浮动，父元素的高度等于子元素中高度最大的值。示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>父元素float清除示例</title>
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300|Open+Sans:700">

	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
	<![endif]-->
</head>
<body>
<div class="container clearfix">
<main role="main" style="float:left">
...
</main>
<div class="sidebar" style="float:right">
...
</div>
</div>
</body>
</html>

likingsn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决float元素父元素高度为0的代码&根据浏览器版本引用js代码，代码备用

我们知道当使用float的元素（即浮动元素）不会影响父元素的高度，更输入的说，浮动元素不是文档流的一部分，有时候会带来一些问题，比如我们希望为父元素设置背景颜色，由于父元素的高度为0，所以背景颜色不能显示，为了解决这个问题，定义一个类clearfix，使父元素清除float带来的影响，css代码如下：.clearfix:before,.clearfix:after {content: "
复制链接

扫一扫