AIDE技术官网
AIDEZY.COM

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;属性是这样子的:

CSS中的Overflow容器溢出部分隐藏啥意思? HTML前端教程 第2张

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

CSS中的Overflow容器溢出部分隐藏啥意思? HTML前端教程 第3张

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

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

<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容器溢出部分隐藏啥意思? HTML前端教程 第4张

添加之后的:

CSS中的Overflow容器溢出部分隐藏啥意思? HTML前端教程 第5张

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

搜一下

海报生成 赞(0) 打赏

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

忘记密码 ?

切换登录

注册