overflow:hidden标签的作用；及其清除浮动的原理

素颜马尾好姑娘i 2022-04-24 04:10 1158阅读 0赞

# overflow标签的含义： #

overflow属性其代表着  **溢出元素内容区域的部分内容应该如何处理；**

其属性值有 **visible（可见的）这个是默认值,hidden（不可见的），scoll（以滚动条的形式出现）auto（浏览器会以滚动条的方式出现）inherit(继承父类的属性)属性介绍代码如下**

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>overflow</title>
    		<style type="text/css">
    			.father{
    				width: 400px;
    				height:400px;
    				background-color: #0000FF;
    				border: 1px solid #0000FF;/*解决外边距合并问题*/
    				/* overflow: hidden; */
    				/* overflow: scroll; */
    				
    				
    			}
    			.son{
    				margin-top:200px;
    				margin-left:200px;
    				width: 400px;
    				height:400px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="father">
    			<div class="son">
    				
    			</div>
    		</div>
    	</body>
    </html>

其中结果如下：默认状况：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70][]

overflow：hidden；属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 1][]

overflow:scoll；属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 2][]

然后就是overflow清楚浮动的原理了；

首先我们要了解BFC规则（Block Formatting Context）块格式化上下文 其本身就相当于一个独立的布局环境；

触发bfc规则要有以下几个条件：

**1.body为根目录**

**2.浮动元素：float:none;以外的值；**

**3.绝对定位的元素：position：fixd absolute;**

**4.overflow:除了默认值以外；**

**5.display：nline-block、table-cells、flex**；

当满足以上条件时就可以触发bfc规则：

### bfc布局规则： ###

1.  **内部的Box会在垂直方向，一个接一个地放置。**
2.  **Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠**
3.  **每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。**
4.  **BFC的区域不会与float box重叠。**
5.  **BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。**
6.  **计算BFC的高度时，浮动元素也参与计算**

所以有如下实例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>overflow清除浮动原理</title>
    		<style type="text/css">
    			.father{
    				width: 100%;
    				/* height: 200px; */
    				background-color: aquamarine;
    				border: 1px solid blue;
    			}
    			.son{
    				width: 100px;
    				height: 200px;
    				background-color: black;
    				float: left;
    			}
    			.son1{
    				width: 200px;
    				height: 100px;
    				background-color: blueviolet;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div class="father">
    			<div class="son">
    			</div>
    			<div class="son1">
    			</div>
    		</div>
    	</body>
    </html>

其作用是清除浮动：其前后对比的图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 3][]![清除浮动前][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 4]

#  本例是在father  div中设置了一个bfc bfc在计算高度的时候浮动高度也在计算之内所有其达到了清除浮动的效果； #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70]: /images/20220220/687eb91351454128b20d2fa6e93b735d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 1]: /images/20220220/3ad9a4cf03834d6599b5695626593638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 2]: /images/20220220/69542f82381b47eaae359631e415856d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190415010819892.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190415010709113.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ==,size_16,color_FFFFFF,t_70