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

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之前的:

添加之后的:

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

菜鸟自学网是一个优秀的网站,一个纯资源下载站,本站仅供交流与学习,你可以在这里找到一切你想要的免费教程,若文章侵权请及时联系删除,无意冒犯,感谢你们!
菜鸟自学网 » CSS中的Overflow容器溢出部分隐藏啥意思?

发表评论

菜鸟自学网是一个免费分享各类自学教程的网站!

立即查看 联系客服