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之前的:
添加之后的:
可以很明显的看到一个清理浮动的效果，父类蓝快就已经显示出来了!
资源均来自第三方，谨慎下载，前往第三方网站下载 解压密码：123456
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：737597453@qq.com
