overflow:hidden

这篇文章主要overflow:hidden清除浮动。
1.问题:设置了浮动的元素将父元素的同级元素覆盖
有三个div,#div2 中有三个浮动的div,这时候 #div3 被覆盖。


        #div1{
            background: blue;
            height: 100px;
        }
        .div1{
            width: 25%; 
            background: green;
            float: left; 
            height: 250px;
        }
        .div2{
            width: 50%; 
            background: orange; 
            float: left; 
            height: 250px;
        }
        .div3{
            width: 25%; 
            background: gray;
            float: left; 
            height: 250px;
        }
        #div3{
            background: black;
            height: 80px; 
        }
    <div id="div1">1</div>
    <div id="div2">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
    </div>
    <div id="div3" ></div>

2.解决办法:
将 #div2 添加overflow:hidden属性
<div id="div2 style="overflow:hidden">
3.解释:
当div没有设置高度的时候,默认会把父级div撑开,但是当div设置了高度情况下,子div超出的部分会被隐藏。

### 回答1: overflow: hidden 是 CSS 中的一个属性,用于指定当内容超出容器的范围时,是否显示溢出的内容。如果使用 overflow: hidden,则内容会被隐藏。这可以用于创建不显示滚动条的块级容器。 ### 回答2: overflow: hidden是CSS中的一个属性,用于控制一个元素的内容溢出时的处理方式。当元素内容超出了其指定的尺寸范围时,可以通过设置overflow: hidden来隐藏溢出的内容。 具体来说,overflow: hidden属性使得超出元素尺寸范围的内容被裁剪隐藏,不会显示在页面上。这种情况下,虽然内容仍然存在,但对用户来说是不可见的。 使用overflow: hidden属性可以实现一些效果,比如防止文本内容溢出容器、隐藏导航栏中的下拉菜单等。当一个容器元素的内容超出了其指定的尺寸范围时,可以将溢出的部分通过设置overflow: hidden进行隐藏,从而避免页面布局混乱。 需要注意的是,overflow: hidden属性只对具有设置高度或宽度的容器元素起效。如果没有设置容器元素的高度或宽度,那么无法触发溢出隐藏的效果。 总之,overflow: hidden是CSS的一个属性,通过设置它可以使得超出容器尺寸范围的内容被隐藏,为页面布局和展示效果提供了一种解决方案。 ### 回答3: overflow: hidden是一个CSS属性,用于控制容器中内容溢出时的处理方式。当容器的内容超出容器的大小时,可以使用该属性来决定内容的显示方式。 该属性的作用是,当内容超出容器的大小时,将超出部分隐藏起来。这意味着,内容会被截断,并且超出容器的部分不会显示出来。因此,容器的大小决定了内容的可见区域。 当容器的宽度或高度不够显示所有内容时,会自动出现滚动条以便滚动查看内容。但是,使用overflow: hidden后,超出容器的内容将被隐藏,无法通过滚动条查看。 这个属性在设计响应式网页时非常有用。当在移动设备上显示具有较大尺寸的内容时,可以使用overflow: hidden来控制内容的显示,以避免内容溢出导致页面错乱。同时,也可以在制作图片展示或幻灯片等需要固定区域大小的效果时使用该属性。 总之,overflow: hidden用于控制容器中内容溢出时的显示方式,将超出容器的内容隐藏起来,并且不会显示滚动条。这是一种常用的CSS属性,特别适用于移动设备和响应式网页设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值