理解overflow:hidden

最新推荐文章于 2023-09-07 18:03:04 发布
最新推荐文章于 2023-09-07 18:03:04 发布
阅读量2.9k 收藏 9
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41637458/article/details/105034793
版权

overflow:hidden意为清除浮动

主要有三个作用
第一隐藏溢出
当div中的文字超出了div的容量，加上overflow:hidden;超出容量的文字，便不再显示

第二清除浮动
父div中有两个子div需要用到浮动使其并排,且父div未规定高度，父的样式并不会显示出来，因为父div（不浮动的元素）不会理会浮动的元素，则父div没有高度，若加上overflow:hidden,则父div去理会浮动的元素

第三解除坍塌
子元素中margin-top:20px;若父元素没有overflow:hidden，此时会将父元素和子元素在一起margin-top:20px;若父元素加上overflow:hidden;则子元素会和距离父元素边界20px

一只老婆奴的java自学虫
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css-overflow以及overflow:hidden的理解与使用
weixin_41993525的博客
11-09 2186
css-overflow的概念理解 overflow是css样式类布局中一个非常常见的概念，它是用来规定当内容溢出目标框时需要如何处理的一种手段。 该属性定义溢出固定内容区域内的子节点元素内容会如何做处理。 overflow： 词名 值 是否默认值 作用 overflow visible 是 overflow设置该值或不设值的默认值。内容不会被修剪，会呈现在元素目标框之外 overflow hidden 否 内容会被修剪隐藏，超出目标框的内容不可见 overflow scroll 否
IE6 Bug overflow:hidden失效
09-25
在IE6浏览器中，开发者经常会遇到一个著名的CSS布局问题，那就是`overflow:hidden`失效的问题。这个问题主要发生在父元素的直接子元素或者下级子元素设置`position:relative`时，导致父元素的`overflow:hidden`属性...
CSS 深入理解：overflow: hidden——隐藏溢出、清除浮动、解除坍塌
树上骑个猴的博客
02-17 9833
overflow:hidden 的主要功能有三个： 隐藏溢出 清除浮动 解除坍塌 举例理解 初始html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co
css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题
最新发布
sssssnmmm的博客
09-07 3786
对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。当父div有固定高度时，如果子div的高度超过父div的高度，那么子div会超出父div的束缚，这种情况就叫溢出。默认情况下，父div没有设置高度，它的高度可以被子div任意撑大。浮动的div不会坍塌。
overflow:hidden 属性详细解释
qq_36470686的博客
09-26 3万+
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。我们下面来详细阐释一下。 测试代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .aBox{ background-col...
学习积累——BFC
qq_40674204的博客
10-14 202
今天在看文章的时候看到了一篇“为什么‘’overflow:hidden"能清除浮动的影响”的文章，作者的理解很到位讲解也很仔细。这篇文章也提到了一个我以前不怎么接触的概念“BFC”。也解决了我之前很多困惑，比如margin合并问题、overflow:hidden能清除浮动等。 BFC BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默...
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。...理解和熟练运用 `overflow:hidden` 对于优化和维护CSS布局至关重要。
一个通俗小故事告诉你溢出隐藏（overflow:hidden）失效的原因
09-25
总之，理解`overflow:hidden`的工作原理以及如何与其他CSS属性交互，对于解决此类布局问题至关重要。开发者需要考虑元素的定位、尺寸、边距以及包含块等因素，以便正确地隐藏溢出的内容。在实际项目中，遇到此类问题...
css中position:relative和overflow:hidden的问题
03-28
总之，`position:relative`和`overflow:hidden`是CSS布局中的两个关键工具，理解它们的工作原理以及如何相互作用，对于提高网页设计和开发的能力至关重要。在实际项目中，我们需要根据具体需求灵活运用这两个属性，...
Overflow：hidden的几种含义
xuebinsunwumei的博客
11-10 2144
Overflow：hidden的几种含义 1、溢出隐藏 2、清除浮动 3、开启bfc
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
热门推荐
Emily
10-23 27万+
一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 /*css样式*/ <style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflo...
CSS中overflow:hidden;作用
ioszhanghui的博客
07-20 6930
在CSS样式操作用，常用的三种，一.解决操出边界，overflow:hidden;可以让超出部分裁剪掉。二.解决子元素float浮动，父元素没有高度。三.解决外边距塌陷，就是子元素的margin-top不起作用。 一.解决操出边界 在div盒子中，如果你对这个元素设置width和height，但是子元素的内容比较大，就会超出父元素的界定范围，如果想要内容不限，就需要设置overflow:hid...
overflow:hidden的作用
YY的博客
12-02 630
overflow:hidden清除浮动、经常配合img图片float：left浮动属性用
overflow:hidden——溢出,坍塌,清除浮动
xiasohuai的博客
11-04 457
深入理解：overflow:hidden——溢出,坍塌,清除浮动 overflow：hidden是overflow属性的一个神奇用法，它可以帮助我们隐藏溢出的元素，清除浮动和解除坍塌。当某一个属性拥有这么多的功能时，难免使人难以把握，不过不要怕，只要信：看完这篇文章，我相信你绝对能对overflow:hidden的用法熟练掌握。 下面的代码将作为基本演示代码，每次讲解一个新的作用，我们都要将代码...
【html&css】overflow ：hidden详细解释
Dominic_zy的专栏
11-09 3304
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。  这是一个常用的div写法，下面我们来书写样式。大家可以
overflow ：hidden详细解释
小秋博客
09-21 2379
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验#box{          width:500px;          background:#00
overflow: auto与overflow:hidden区别
我心坚持
05-04 1206
overflow: auto;将看不见被隐藏的，以滚动条的形式进行展示。 overflow:hidden;直接将多余的隐藏，想看也看不了。
overflow-x:visible和overflow-y：auto失效
05-12
可能是由于父元素设置了overflow:hidden属性，导致子元素的overflow属性失效。因为子元素的overflow属性会受到父元素overflow属性的限制。你可以尝试将父元素的overflow属性设置为visible或auto，或者将子元素放到一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值