CSS 的overflow:hidden 属性详细解释

overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而其实它还有清除浮动这个功能。

             taobao demo

这段代码是一个做淘宝搜索框中的一段代码，这里overflow：hidden就起到了一个清除浮动的效果。具体代码可以看慕课网http://www.imooc.com/video/282里的教程

时间： 2024-10-24 16:04:25

CSS 的overflow:hidden 属性详细解释的相关文章

转：css中overflow:hidden 不起作用了吗？

css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似不合理的现象背后都会有其合理的解释. 我们知道,overflow属性值有这几种:visible:声明内容不会被剪裁.比如内容可能被渲染到容器外面.hidden:声明内容将被剪裁,并且也甭想使用滚动条来查看剪裁掉的内容.scroll:声明内容将被剪裁,但有可能出现滚动条来查看被剪裁掉的内容.滚动条出现

CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法

在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了, 那我们通常会使用overflow:hidden来隐藏文字,但是发现在ie6,ie7下overflow:hidden无效了,那么如何解决这个问题呢? 这就是ie6.ie7 的bug. 解决方法: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效.我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了o

inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面,如下所示: 那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮. 我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题. 但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题. 1. 问题现象我们先给出一个在线实例: http://wow.techbrood.com/fiddle/15438 我们可以看到当给中间的 in

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; bord

[Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面,如下所示: 那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮. 我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题. 但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题. 1. 问题现象

CSS 的overflowhidden 属性详细解释

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的.但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下. 这是一个常用的div写法,下面我们来书写样式.大家可以在DMX中自己做试验. 1 #box{ 2 width:500px;

CSS 的overflow:hidden (清除浮动)

verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的. verflow:hidden清除浮动,例如如下:(样式box div是样式content div的父元素) .box{ background:#000; width:300px;

css文本换行相关属性及解释

本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space.这三个属性可以说是专为了文字断行而创造出来的.首先我们得知道这三个属性到底是做什么用地: word-wrap语法: word-wrap: normal(默认) | break-word各个浏览器均能识别参数: normal: 允许内容顶开指定

CSS中overflow:hidden

CSS中,overfllow:hidden的作用是隐藏溢出比如:<div style="width:300px;overflow:hidden" id=1><div id=2></div><div> 当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏. ?