浮动子元素:溢出:隐藏还是清除:两者?

1. 隐藏溢出-相当可靠的方法。主要的缺点是,如果在父元素上设置高度,任何溢出都将…嗯,隐藏起来。我在创建带有浮动列表项的菜单时发现了这个问题-子菜单不会出现。

2. 清除元素-而不是换行符,我将使用div和 height: 0; clear: both; 因为它不会造成下面的差距。这是一个更可靠的方法,唯一的缺点是标记中有额外的元素。

3. 浮动父元素-根据我的经验,有太多的情况下,您不想浮动父元素,所以我会避免它。

4. 也可以使用生成的内容方法:

   #parent:after {
     content: ".";
     visibility: hidden;
     clear: both;
   }
   

   这节省了标记中额外元素的需要,但在ie7及以下版本中不起作用。

5. 使用内联块-记住了这个方法。将这两列设置为 display: inline-block 它们将并排出现:

   .child {
     display: inline-block;
     vertical-align: top;
   }
   

   这个方法唯一需要记住的是,如果一个块的close标记和另一个块的opening标记之间有空格,那么列之间就会出现一个空格(空格的大小取决于字体,因此很难测量)。只要你愿意 ...</div><div id=... 该方法工作良好,优于imo中的浮式元件。

第二个是完全不必要的,并添加额外的标记。只是出了点问题。如果符合条件,就用第一个。您也可以浮动父元素来执行相同的操作,尽管它可能不适合您正在执行的操作。

ppk在 Clearing floats 在怪癖模式上。