清除浮动的方法

最新推荐文章于 2024-04-22 21:55:14 发布

BossNoNo

最新推荐文章于 2024-04-22 21:55:14 发布

阅读量172

点赞数

分类专栏： css

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、父级div定义伪类:after 和 zoom

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
<style>
.box_1 { border: 1px solid black;}
.left { width: 100px; height: 100px; float: left; background-color: red;}
.box_2 { width: 300px; height: 100px; margin-top:20px; background-color: green;}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
} 
.clearfix {
	zoom:1;
}
</style>
</head>
<body>
	<div class="box_1 clearfix">
		<div class="left"></div>
	</div>
	<div class="box_2"></div>
</body>
</html>

原理：IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

二、父级div定义 overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
<style>
.box_1 {border: 1px solid black;/* width: 300px; */overflow: hidden; zoom:1;}
.left { width: 100px; height: 100px; float: left; background-color: red;}
.box_2 { width: 300px; height: 100px; margin-top:20px; background-color: green;}

</style>
</head>
<body>
	<div class="box_1">
		<div class="left"></div>
	</div>
	<div class="box_2"></div>
</body>
</html>

原理：必须定义width或zoom:1（设置宽度时，IE6、IE7会清除浮动；设置 zoom:1时，IE6、IE7会清除浮动），使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

PS：

父元素单使用

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

时只有 IE8以上和非IE浏览器支持；

父元素单使用

.clearfix {
	zoom:1;
}

时只有 IE6、IE7会清除浮动；

父元素单使用

 overflow: hidden;

时 IE7 IE8以上和非IE浏览器支持，只有IE6不清除浮动。

以上：

现在IE6使用率很低了，在pc端可能还考虑继续用公共类clearfix，

HTML5的时代，手机端我现在就只在父元素加个overflow: hidden;

BossNoNo

关注

0
点赞
踩
0

收藏

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

清除浮动的方法
复制链接

扫一扫

专栏目录