float：left; vs display：inline; vs display：inline-block; vs display：table-cell; [英] float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

问题描述

我的问题

1. 专业网页设计师喜欢这些方法吗？

   / li>
   

2. 这些方法在绘制网站时是否受到网络浏览器的影响？




3. 个人偏好？




4. 还有其他我缺少的技巧吗？

注意：以上问题与设计多栏布局有关。

---

float：left;

从html中删除空格似乎是解决这个问题最简单的方法，但是如果你真的挑剔你的html。

display：table-cell;

，您可能需要了解。但是它不是最好的支持功能（IE不支持，即使在IE9和所有其他浏览器所需的供应商前缀），所以你可能不想使用它。

还有CSS FlexBox功能，这是为了允许文本从一个框到另一个框流动。这是一个令人兴奋的功能，将允许一些复杂的布局，但这仍然是非常发展 - 参见 http://html5please.com/#flexbox

希望有所帮助。

My Question(s)

1. Are any of these methods preferred by a professional web designer?

2. Are any of these methods prefereed by a web browser when drawing the website?

3. Is this all just personal preference?

4. Are there other techniques I'm missing?

Note: Above questions are in regards to designing a multi-column layout

---

float:left;

http://jsfiddle.net/CDe6a/

This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to clear:both; afterwards. Another con that I just found was the inability to align text vertically.

display:inline;

This seems to correct the problem of the collapsing parent, but adds whitespace.

http://jsfiddle.net/CDe6a/1/

Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.

http://jsfiddle.net/CDe6a/2/

display:inline-block;

Seems to behave exactly like display:inline;.

http://jsfiddle.net/CDe6a/3/

display:table-cell;

http://jsfiddle.net/CDe6a/4/

Works perfect.

My thoughts:

I'm sure I'm missing a ton of stuff, like certain exceptions that will break the layout but, display:table-cell; seems to work the best, and I think I will start replacing float:left; as I always seem to mess up on clear:both;. I've read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.

解决方案

Of the options you asked about:

• float:left;
  I dislike floats because of the need to have additional markup to clear the float. As far as I'm concerned, the whole float concept was poorly designed in the CSS specs. Nothing we can do about that now though. But the important thing is it does work, and it works in all browsers (even IE6/7), so use it if you like it.

The additional markup for clearing may not be necessary if you use the :after selector to clear the floats, but this isn't an option if you want to support IE6 or IE7.

• display:inline;
  This shouldn't be used for layout, with the exception of IE6/7, where display:inline; zoom:1 is a fall-back hack for the broken support for inline-block.

• display:inline-block;
  This is my favourite option. It works well and consistently across all browsers, with a caveat for IE6/7, which support it for some elements. But see above for the hacky solution to work around this.

The other big caveat with inline-block is that because of the inline aspect, the white spaces between elements are treated the same as white spaces between words of text, so you can get gaps appearing between elements. There are work-arounds to this, but none of them are ideal. (the best is simply to not have any spaces between the elements)

• display:table-cell;
  Another one where you'll have problems with browser compatibility. Older IEs won't work with this at all. But even for other browsers, it's worth noting that table-cell is designed to be used in a context of being inside elements that are styled as table and table-row; using table-cell in isolation is not the intended way to do it, so you may experience different browsers treating it differently.

Other techniques you may have missed? Yes.

• Since you say this is for a multi-column layout, there is a CSS Columns feature that you might want to know about. However it isn't the most well supported feature (not supported by IE even in IE9, and a vendor prefix required by all other browsers), so you may not want to use it. But it is another option, and you did ask.

• There's also CSS FlexBox feature, which is intended to allow you to have text flowing from box to box. It's an exciting feature that will allow some complex layouts, but this is still very much in development -- see http://html5please.com/#flexbox

Hope that helps.

这篇关于float：left; vs display：inline; vs display：inline-block; vs display：table-cell;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！