清除浮动

最新推荐文章于 2022-12-06 09:59:20 发布

hst_gogogo

最新推荐文章于 2022-12-06 09:59:20 发布

阅读量261

点赞数

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

本文链接：https://blog.csdn.net/hst_gogogo/article/details/91184050

版权

网页专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当一个元素设了浮动时，它可能会影响到后面的盒子的布局。拿下面这个例子来说：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}	
			
            .clearFloat{
				background-color: green;
				overflow: hidden;
			}
			.clearChile0{
				width: 100px;
				height: 200px;
				background-color: pink;
				/*float: left;*/	
				
			}
			.clearChile1{
				width: 100px;
				height: 200px;
				background-color: gold;
				
			}
			.clearChile2{
				width: 160px;
				height: 300px;
				background-color: purple;
			}
			
		</style>
	</head>
	<body>
		<div class="clearFloat">
			<div class="clearChile0"></div>
			<div class="clearChile1"></div>
			<div class="clearChile2"></div>
		</div>

	</body>
</html>

在没有给.clearChile0设浮动的时候，布局是这样的：

当我给.clearChile0一个float:left之后，布局如下：

这是因为div .clearChile0和.clearChile1宽高相等，让.clearChile0之后，这个div脱离标准文档流，.clearChile1占了.clearChile0原来的位置，被.clearChile0遮住了。

可以清除浮动的方法：

①给.clearChile1设置clear:both，清除.clearChile0的浮动对它的影响；

②在.clearChile0和.clearChile1之间（即浮动盒子和不浮动盒子之间）加上 <br style="clear: both;"/> ；

前两种方法的区别是：①存在margin塌陷问题，②不存在margin塌陷问题。如需了解margin塌陷请看我另一篇博文： overflow:hidden解决溢出隐藏、清除浮动、margin塌陷等问题

③父容器overflow:hidden （这个方法似乎仅适用于浮动的是最后一个子容器或只有一个子容器并且子容器浮动，如：本例中的.clearChile2，这个方法解决的是：没有给父容器设置高度时父容器高度没有加上最后一个子容器高度的问题，同时也能清除.clearChile2浮动对后面的元素所造成的影响；如果浮动的不是最后一个子容器,如.clearChile0或.clearChile1，就要用前面两种方法）。看下面这个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}	
			
            .clearFloat{
				background-color: green;
				/*overflow: hidden;*/
			}
			.clearChile0{
				width: 100px;
				height: 200px;
				background-color: pink;
		
				
			}
			.clearChile1{
				width: 100px;
				height: 200px;
				background-color: gold;
				
			}
			.clearChile2{
				width: 160px;
				height: 300px;
				background-color: purple;
				float: left;	
			}
			
		</style>
	</head>
	<body>
		<div class="clearFloat">
			<div class="clearChile0"></div>
			<br style="clear: both;"/>
			<div class="clearChile1"></div>
			<div class="clearChile2"></div>
		</div>
		<div style="width: 100px;height: 100px;background-color: greenyellow;"></div>

	</body>
</html>

在div .clearFloat后面定义一个宽高为100的小div、另.clearChile2左浮动，当没有给.clearChile2的父容器.clearFloat设置overflow:hidden时页面布局是这样的：

小盒子被遮住了，父容器的高度也没有将紫色div的加进去。

解决方法：给.clearChile2的父容器.clearFloat设置 overflow:hidden；

④给父容器定义::after 伪元素（如果要兼容IE7-版本的浏览器，还要给父容器设置 zoom:1），具体的请参考下面这三篇博文：

zoom:1的常见作用

zoom:1的作用

haslayout详解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}	
			
            .clearFloat{
				background-color: green;
				/*zoom: 1;*/
			}
			/*.clearFloat::after{
				content: "";
				clear: both;
				display: block;
			}*/
			.clearChile0{
				width: 100px;
				height: 200px;
				background-color: pink;
		
				
			}
			.clearChile1{
				width: 200px;
				height: 400px;
				background-color: gold;
				float: left;
				
			}
			.clearChile2{
				width: 300px;
				height: 300px;
				background-color: purple;
				
			}
			
			.clearFloat2{
				width: 500px;
				height: 200px;
				background-color: palegreen;
			}
			
		</style>
	</head>
	<body>
		<div class="clearFloat">
			<div class="clearChile0"></div>
			<div class="clearChile1"></div>
			<div class="clearChile2"></div>
		</div>
		<div class="clearFloat2"></div>
		

	</body>
</html>

给.clearFloat的子容器.clearChile1设置左浮动，布局如下：

浮动的子容器高度不能撑开父容器，取消代码注释，得到页面布局如下：

可见，用此方法可以清除浮动子元素对父元素的影响，但是并不能清除掉对其后面的兄弟元素的影响，如果要让紫色div回到它原来的位置，还要对紫色div用第①或②种方法清除浮动。

此外，用这种方法需要注意的是：

a 不能省略content；

b clear:both和display:block(或table)都要有；

另：

zoom是IE专有的属性；

::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

:after和::after基本上是等价的，但:after是css2.0版本的语法，::after是css3的语法;

Firefox 3.5-和IE8都只支持:after。(Firefox 3.5-的:after不允许在position, float, list-style-* 等属性中使用)

如有谬误，还请指出！

hst_gogogo

关注

0
点赞
踩
0

收藏

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

当一个元素设了浮动时，它可能会影响到后面的盒子的布局。拿下面这个例子来说：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: ...
复制链接

扫一扫