是溢出:隐藏正确的方法,以确保浮动项目不"泄漏"？

Question

假设您有一个文章列表,其中一些文档具有正确的浮动图像和非常少的文本,因此图像浮动在文章之外并进入下一篇文章,搞砸了.

确保文章内的元素不会漂浮在其外部的正确/首选/最佳方法是什么？

我知道这overflow:hidden有效,但这是正确的用法吗？或者它恰好碰巧做了我想要的机会？

Answer 1

您有三种方法可以做到:

1. 你可以拥有overflow:hidden哪种干净的方式.

   • 优点:它不会混淆HTML的语义,没有"死元素".

   • 缺点:如果容器具有已定义的尺寸,则剪切内容,并剪切内部元素的阴影.

     div        <-- style="overflow:hidden"
         div    <-- floating children
         div    
     div        <-- style="overflow:hidden"
         div    <-- floating children
         div
     

2. 您可以拥有一个空白元素,通常是<div>在具有浮动的容器之后.用这个样式clear:both.

   • 缺点:在DOM中有一个"死元素".

     div
         div    <-- floating children
         div 
     div        <-- style="clear:both"
     div 
         div    <-- floating children
         div 
     

3. 您可以向容器添加"clearfix"类,并使用:after伪类添加"清除动态点/空格".基本上它像第二个一样工作,但使用:after插入一个"clear:both"的空间本文解释了它.

   • 优点:它不会混淆HTML的语义,没有"死元素".

   • 缺点::after在IE7及更早版本中不支持 "classitis"(过度使用类),因此使用了CSS hacks

     div        <-- :after
         div    <-- floating children
         div
     " "        <-- style="clear:both"
     div        <-- :after
         div    <-- floating children
         div
     

您可以使用三者中的任何一种,它们效果很好.我通常在大多数时间使用1,如果我在容器中有阴影,或者容器有固定尺寸,我使用3.方法3依赖于:after哪个是新的.为了支持这个clearfix,你可以使用文章中描述的旧的CSS hack.