CSS 之overflow:hidden 用来清除浮动

最新推荐文章于 2023-09-07 18:03:04 发布

原创最新推荐文章于 2023-09-07 18:03:04 发布 · 492 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

47 篇文章

订阅专栏

本文通过实例详细解析了CSS中浮动元素的行为，并澄清了overflow:hidden并非清除浮动，而是隐藏超出容器的部分，同时展示了如何影响页面布局。

在网上有很多关于用overflow:hidden来清除浮动的文章，这种说法是不对的。这里来更正一下，overflow:hidden清除不了浮动，其实它隐藏了浮动元素的一部分。

我们用一个例子来说明：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <title>Document</title>
  </head>
  <style>
 
	.wrap{
		outline:red 1px solid;
		width: 250px;
		height: 50px;
		
	
	}
	.item{
		width: 100px;
		height: 100px;
		outline: blue 1px solid;
	
		
	}

  </style>
  <body>
    <div class="wrap">
		<div class="item"></div>
		<div class="item"></div>
	</div>
	
    <script>
     
		
    </script>
  </body>
</html>

上面的代码没有设置浮动，效果如下图所示：

这个很好理解，三个div，这三个div都在文档流中。

现在我们设置蓝色边框div向左浮动。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <title>Document</title>
  </head>
  <style>
 
	.wrap{
		outline:red 1px solid;
		width: 250px;
		height: 50px;
		
	
	}
	.item{
		width: 100px;
		height: 100px;
		outline: blue 1px solid;
		float: left		
	}

  </style>
  <body>
    <div class="wrap">
		<div class="item"></div>
		<div class="item"></div>
	</div>
	
    <script>
     
		
    </script>
  </body>
</html>

两个蓝色边框div都脱离了标准文档流向左浮动。第一个蓝色边框div发现它上边的div没有脱离标准文档流，所以它紧邻显示。第二个蓝色边框div发现它上边的div是浮动的，所以它在这个浮动的div右边显示。效果如下：

我们看出浮动效果了。

我们再添加一个div：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <title>Document</title>
  </head>
  <style>
 
	.wrap{
		outline:red 1px solid;
		width: 250px;
		height: 50px;
	
	}
	.item{
		width: 100px;
		height: 100px;
		outline: blue 1px solid;
		float: left
		
	}
	.secWrap{
		outline:black 1px solid;
		width: 300px;
		height: 300px;
	
	}
  </style>
  <body>
    <div class="wrap">
		<div class="item"></div>
		<div class="item"></div>
	</div>
	<div class="secWrap"></div>
    <script>
     
		
    </script>
  </body>
</html>

我们新添加的div 没有设置浮动，所以它并没有脱离文档流，所以会挨着第一个div显示，效果如下：

我们看到新增加的黑色边框div在红色边框div下面紧挨着显示。其实这四个div，红色边框div和黑色边框div 没有脱离文档流，两个蓝色边框div已脱离文档流。

好了，那么我们给红色边框div增加一个overflow:hidden属性，看看什么效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <title>Document</title>
  </head>
  <style>
 
	.wrap{
		outline:red 1px solid;
		width: 250px;
		height: 50px;
		overflow:hidden;
	}
	.item{
		width: 100px;
		height: 100px;
		outline: blue 1px solid;
		float: left
		
	}
	.secWrap{
		outline:black 1px solid;
		width: 300px;
		height: 300px;
	
	}
  </style>
  <body>
    <div class="wrap">
		<div class="item"></div>
		<div class="item"></div>
	</div>
	<div class="secWrap"></div>
    <script>
     
		
    </script>
  </body>
</html>