overflow:hidden属性
来源：2-13 清除浮动其它方法
键盘f11
2020-04-28 18:27:25
<!DOCTYPE html>
<html>
<head>
<title>hidden属性</title>
<style type="text/css">
.father{
margin: 0px auto;
width: 500px;
background-color:pink;
overflow: hidden;
}
.chid{
float: left;
width: 248px;
height: 250px;
border:1px red solid;
}
</style>
</head>
<body>
<div class="father">
<div class="chid"></div>
<div class="chid"></div>
</div>
</body>
</html>
您好，老师，我想咨询一下关于overflow:hidden属性，我去网上查了一下资料，如上述代码所示：当chid属于浮动状态时，因为div容器在高度上是自适应，没有内容的话，导致chid两个div溢出，这个时候可以使用overflow:hidden命令添加到父类style中。hidden元素定义为：内容会被修剪，并且其余内容是不可见的，修剪的内容是浮动溢出的部分，那么其余内容是指的是什么呢？这里我不太想的明白，我的理解是：溢出浮动的内容被修剪后，div容器仍然是空白状态，因为溢出浮动的内容是不可见，但实际程序运行的时候，浮动的内容出现在了div容器中，那么是否可以理解为，chid的浮动被重新定义了，保留原有浮动属性内容的同时，存在于父类的div容器中？相比于clear:both属性和.father:after{..}属性，hidden属性我理解不了，按照定义好像是浮动的内容会消失？
1回答
-
好帮手慕夭夭
2020-04-28
同学你好，overflow:hidden是设置超出容器的内容隐藏。浮动虽然脱离文档流，但是你可以理解为浮动元素是在父元素这个区域内悬浮。例如如下：无论元素如何浮动，它都会在父容器这块区域内。
超出隐藏说的是超出父容器区域的内容。例如如下：子元素内容超出了父元素区域，超出的部分就会隐藏。
同学的代码中，两个盒子是脱离文档流了，但是它还在父元素这个区域内容，所以不会隐藏。
你可以任意在盒子里面添加内容，由于内容太多，超出的部分就会被隐藏：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题