CSS中的Overflow容器溢出部分隐藏啥意思?
CSS中的Overflow容器溢出部分隐藏啥意思?

前言:

CSS中的Overflow容器溢出部分隐藏啥意思?,如果对你有帮助就看看吧。

正文:

今天用一个特别简单的小例子,带大家看懂overflow;hidden;啥意思,先用文字解析一下:

第一种方法:这个属性它本来是CSS功能里面是使用被设置容器溢出部分隐藏起来,实例代码:

.wai{ 
width:200px; 
background:#000;
height:200px;
border:2px 
blue solid; 
}
.nei {
float:left; 
width:300px;
height:300px; 
background:red;
}

<div class="wai">

<div class="nei"></div>

</div>

不添加overflow;hidden;属性是这样子的:

给父类添加overflow;hidden;属性后是这样子的:

可以很明显的看到,红快超出父类的多余区域已经被清理干净了。

那么他还有第二种用法,它另外一个作用可以清除浮动,实例代码:

<html>
<head>
<title></title> 
<style>
.aBox{
background-color:blue;

}
.bBox{
background-color:yellow;
float:left;
height:400px;
width:400px;
}
</style>
</head>
<body>
<div class="aBox">
<div class="bBox"></div>
</div> 
</body>
</html>

不添加hidden之前的:

添加之后的:

可以很明显的看到一个清理浮动的效果,父类蓝快就已经显示出来了!

声明:所有内容均收集于网络,收集的内容仅供内部学习和讨论,建议您在下载后的24个小时之内从您的电脑或手机中删除上述内容,如果您喜欢该内容,请支持并购买正版资源。如若本站内容侵犯了原著者的合法权益,请联系邮箱3641180084@qq.com,我们将及时处理。