CSS: 清除浮动-使用:Overflow

     在使用Div+Css布局的时候我们所面临的共同问题之一是,包装容器不扩到子元素的浮动元素的高度。你也可以使用overflow属性来解决这个问题 ?这不是一个新的CSS技巧。今天,我想重新起这几个技巧的话题。

演示地址:http://webdesignerwall.com/demo/clear-float/

 演示1:

    下面的演示中显示的浮动子元素在父容器高度不自动适应的问题 。为了解决这个问题,您可以简单地添加CSS属性overflow:auto (or overflow:hidden)的包装容器。这也许是最简单的方法来清除浮动。

溢出汽车

.container {
overflow
: auto;
}


演示2:

Overflow:auto 也可以用来防止从周围的浮动元素包装的内容。比方说,你正在设计一个评论列表。您将最有可能,有一个头像,浮于左,评论在右。要防止的头像周围环绕的评论,只需添加 overflow:hidden 的评论容器。使用overflow这里的优点是,我没有给评论容器设置一个float or width。容器自动校准浮动的头像图片。

溢出汽车

.image {
float
: left;
}

.text
{
overflow
: hidden;
}

缺点(参见演示

虽然它是一个很好的的技巧,也一些弊端:

  • 使用 overflow:auto,会造成一个滚动条,如果您的内容是延长了容器的边界。例如,如果你有一个长unbreaking的文本(即长的URL文本)或一个较大的图像,是更大的,则容器滚动显示。
  • 为了避免一个滚动显示你应该使用overflow:hidden。然而,这种方法有一个缺点使用overflow:hidden隐藏任何超出容器的边界的内容。

Word-wrap

为了解决大文本问题,只需添加 word-wrap:break-word 到容器,这将迫使文本换行到一个新的行。

.container {
word-wrap
: break-word;
}

Max-width

为了防止图像扩大超出容器边界,添加的max-width:100%,它会调整图像的大小符合容器的最大宽度。

.container img {
max-width
: 100%;
height
: auto;
}

英文原稿:CCSS: Clearing Floats with Overflow| WebDesignerWall

翻译整理:CSS: 清除浮动-使用:Overflow | 孟晨

作者:孟晨
出处:http://www.cnblogs.com/xiaoyao2011/
欢迎任何形式的转载,但请务必注明出处。

你可能感兴趣的:(overflow)