CSS Float:left 和 Display:inline 有什么区别？虽然浏览器中的每个元素默认都向左

What is the difference between Float:left vs Display:inline? While every element in browser goes to left by default

提问by Jitendra Vyas

What is the differences between Float vs Display:inline? by default everything goes to left side in every browser. then 2 display inlined elements should be worked same like float:left.

Float 与 Display:inline 之间有什么区别？默认情况下，每个浏览器中的所有内容都位于左侧。那么 2 个显示内联元素应该像 float:left 一样工作。

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline

回答by Frank DeRosa

display:inlinemeans a element is will "stack" next to other items, like images, spans or the bold tag. This is opposed by block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.

display:inline意味着一个元素将“堆叠”在其他项目旁边，如图像、跨度或粗体标签。这display:block与占用水平空间的块级元素 ( )相对，意味着换行，并且不会彼此相邻，例如 div、段落或表格。

Think of it this way...

这么想……

<img /><img /><img />

<div />
<div />
<div />

float is a different notion altogether, moving content either left or right. By default, a floated element isinline, and floated elements will stack up next to one another.

浮动是一个完全不同的概念，向左或向右移动内容。默认情况下，浮动元素是内联的，浮动元素将彼此相邻堆叠。

All of these types of elements are part of the normal document flow, meaning they take up "space" in the design that cannot be shared.

所有这些类型的元素都是正常文档流的一部分，这意味着它们占用了设计中无法共享的“空间”。

回答by DigitalRoss

There are two types of formatting: block level and inline. The block level formatting is done with a box model that uses a set of rules for layout.

有两种类型的格式化：块级和内联。块级格式化是通过使用一组布局规则的盒模型完成的。

Inline formatting is what text normally gets. It means, informally, that things are filled into lines.

内联格式是文本通常得到的。非正式地，这意味着将事物填充成行。

At times, you want to change the default formatting an item will get. Something that normally might be block level formatted you might want to have treated as inline. A div containing content such as graphic of a key, for example, might need to be displayed within a sentence. One might then override its formatting with display:inline. Images are already displayed "Inline"

有时，您希望更改项目将获得的默认格式。通常可能是块级格式化的东西，您可能希望将其视为内联。例如，可能需要在一个句子中显示包含诸如按键图形等内容的 div。然后可以用display:inline. 图像已显示为“内嵌”

The CSS specificationhas a surprisingly simple definition for floats:

在CSS规范有花车一个令人惊讶的简单的定义：

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side

浮动是在当前行上向左或向右移动的框。浮动（或“浮动”或“浮动”框）最有趣的特征是内容可以沿着它的一侧流动

So a float is a sort of third category of formatting model. It relates to inline as being, informally put, a layout model.

所以浮点数是第三类格式化模型。它与内联有关，非正式地说，是一种布局模型。

回答by Vahid

Although it's too late to answer, but one of the major differences that I can mentioned here is about: Clear

虽然现在回答为时已晚，但我可以在这里提到的主要区别之一是： Clear

In floatelements you should Clearyour floats but in inlineelements no clearing is required.

在float元素中，您应该Clear浮动，但在inline元素中不需要清除。

You can see a live example here: http://jsfiddle.net/K9PXF/

你可以在这里看到一个活生生的例子：http: //jsfiddle.net/K9PXF/

And this a great article about floats and clearing: http://css-tricks.com/all-about-floats/

这是一篇关于浮动和清算的好文章：http: //css-tricks.com/all-about-floats/

回答by tahdhaze09

Every browser has a "flow". The flow sort of emulates a word processor in that elements flow from left to right, top to bottom. Elements that do not fit at the end of a "line", wrap to the next "line", so to speak.

每个浏览器都有一个“流程”。流排序模拟文字处理器，其中元素从左到右，从上到下流动。不适合在“行”末尾的元素，可以这么说，换行到下一个“行”。

Block elements take up the full line. Inline elements only take up as much space as they need, so other elements can sit next to them on the same line. Unless there is a width declared, that doesn't happen with block elements.

块元素占据整行。内联元素只占用它们需要的空间，因此其他元素可以在同一行上与它们相邻。除非声明了宽度，否则块元素不会发生这种情况。

Floating an element takes the elements out of the normal flow and shifts it to the left/right. The space that the object occupied before it was floated is empty, and collapses. If I float two elements that take up more space than the line can hold, one may fall to the next "line".

浮动元素会将元素从正常流中取出并将其向左/向右移动。物体漂浮之前占据的空间是空的，并且会坍塌。如果我浮动两个元素，它们占用的空间超过该行可以容纳的空间，则一个元素可能会落到下一个“行”。

@Jitendra - displaying two spans inline will put them together in the flow, yes. Floating two elements that do not take up the space of the full line will appear to do the same thing. They definitely have different uses, though.

@Jitendra - 内联显示两个跨度会将它们放在一起，是的。浮动两个不占据整行空间的元素看起来会做同样的事情。不过，它们肯定有不同的用途。

If I wanted to have text flow around an image in a paragraph, I would float the image not use display:inline. If I wanted to create a horizontal menu from list item elements, I would use display:inline, not float.

如果我想让文本在段落中的图像周围流动，我会浮动图像而不使用display:inline. 如果我想从列表项元素创建一个水平菜单，我会使用display:inline，而不是float。

回答by Darryl Hein

I always remember what floating is by remembering the original <img align="left" />which acts very similar to float:left. Basically float, floats the image to the left and wraps the text or other content around it. Without float it would display as a piece of text.

我总是通过记住<img align="left" />与float:left. 基本上是浮动，将图像向左浮动并将文本或其他内容包裹在其周围。如果没有浮动，它将显示为一段文本。

Float works similar to other document tools where you can have the text wrap around the image (or HTML element).

Float 的工作方式类似于其他文档工具，您可以在其中让文本环绕图像（或 HTML 元素）。

回答by Mitali Cyrus

Go to w3schools and try this in their editor (because the image links are entirely theirs, or you can replace the image src from your image source urls) Then resize the windows.

转到 w3schools 并在他们的编辑器中尝试此操作（因为图像链接完全是他们的，或者您可以从图像源 url 替换图像 src）然后调整窗口大小。

What you will notice is.. That in case of display:inline, the text will split into words and some words of the text will appear in the next line. Though in the case of float:left the whole text will be displayed together as an element and will not split.

你会注意到.. 在 display:inline 的情况下，文本将拆分为单词，文本中的一些单词将出现在下一行。尽管在 float:left 的情况下，整个文本将作为一个元素一起显示并且不会拆分。

The purpose of inline is just to display everything in a LINE, though the purpose of float is to arrange ELEMENTS aligning to some dimension.

inline 的目的只是在 LINE 中显示所有内容，而 float 的目的是排列 ELEMENTS 对齐到某个维度。

<!DOCTYPE html>
<html>
<head>
<style>
.thumb 
{
float:left;
}
.thumbnail 
{
display:inline;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<br>Below are the inline elements<br>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<p class="thumbnail">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<br><br>Below is the floating elements<br><br>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
<p class="thumb">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>

回答by BitDrink

The normal workflow of a browser is to display the elements from the left to the right, each near the other (if inline elements) ... when a line ends because of the size of the web page, the browser starts again to display the elements from the left to the right but on the next line.

浏览器的正常工作流程是从左到右显示元素，每个元素都靠近另一个（如果是内联元素）……当一行由于网页大小而结束时，浏览器会再次开始显示元素从左到右但在下一行。

A "float" directive, on an element, forces the browser to display the element out of the normal workflow, on the top-left or the top-right side of the webpage.

元素上的“浮动”指令强制浏览器在网页的左上角或右上角显示超出正常工作流程的元素。

The "display inline" directive forces the block elements to be displayed inline, so the browser manage these elements as explain above!

“显示内联”指令强制块元素内联显示，因此浏览器管理这些元素，如上所述！

IN RESPONSE TO YOUR QUESTION:No! As I've written: the float:left force any element (block or not block), placed on any line of a web page, to be floated on the left side of the web page ... even if the text aligning is set to "right"! If the text align is set to left, applying a float:left seams that nothing happens ... instead even in that case the element is forced to go out of the normal workflow of the browser, in fact, usually, the margin left is reseted!

针对您的问题：不！正如我所写的： float:left 强制任何元素（阻止或不阻止），放置在网页的任何行上，浮动在网页的左侧......即使设置了文本对齐要“对”！如果文本对齐设置为左对齐，则应用 float:left 接缝，什么也不会发生……相反，即使在这种情况下，元素也被迫退出浏览器的正常工作流程，实际上，通常情况下，左边距是重置！

The display:inline doesn't affects the inline elements ... if the text align (of the elements' container) is set to "right", a display:inline doesn't float it on the left (notice, I'm referring to inline elements)... because the "display:inline" says to the browser only to display an element in the same line of the normal workflow ... so, if an element is inline (for example a link element), this property doesn't change its behavior!

display:inline 不会影响内联元素……如果文本对齐（元素的容器）设置为“右”，则 display:inline 不会将其浮动在左侧（注意，我是指的是内联元素）...因为“display:inline”告诉浏览器只在正常工作流程的同一行中显示一个元素...所以，如果一个元素是内联的（例如一个链接元素），这个属性不会改变它的行为！

So, the "display:inline" affects only the "block" elements! But even in this case, it doesn't float left the block element, but it force the element only to be displayed in the same line of the other inline elements!

所以，“display:inline”只影响“block”元素！但即使在这种情况下，它也不会浮动到块元素的左侧，而是强制该元素仅显示在其他内联元素的同一行中！

ABOUT YOUR EXAMPLE:The div(s) are block elements, the normal workflow is not inline... so the browser, by default, shows them one below the other, like in this example:

关于您的示例：div(s) 是块元素，正常的工作流程不是内联的……所以浏览器默认情况下将它们显示在另一个下面，就像在这个例子中一样：

<div class="purple" style="float:left">Link one</div> 
<div class="purple">Link two</div> 
<div class="purple">Link three</div> 
<div class="purple">Link four</div>

even if you apply a float:left to the first div, seams that nothing happens only why it is already on the top-left corner ... where should it go otherwise!!!???

即使您将 float:left 应用到第一个 div，接缝也没有发生任何事情，只是为什么它已经在左上角......否则它应该去哪里！！！？？？

The second example ...

第二个例子...

<div class="red" style="float:left">Link one</div> 
<div class="red" style="float:left">Link two</div> 
<div class="red" style="float:left">Link three</div> 
<div class="red" style="float:left">Link four</div> 

When you apply a float:left to adjacent div(s), force the browser to display them out of the normal workflow(As I sad, block elements appears, by default, one below each other!), floating the div(s) on the left side ... in this case one near each other. Notice that as I sad the margin are reseted ... because the div(s) are not on a ordinary line of the browser, but are only floated on the left ... again, out of the normal workflow!

当您将float:left 应用到相邻的 div(s) 时，强制浏览器将它们显示在正常工作流程之外（我很伤心，块元素出现，默认情况下，一个在彼此下方！），浮动 div(s)在左侧......在这种情况下，彼此靠近。请注意，我很伤心，边距被重置...因为div（s）不在浏览器的普通行上，而只是浮动在左侧...再次，超出正常工作流程！

In fact, the next example confirm what I sad in theory ... the display:inline force the browser to display block elements (div) on the same line respecting their default margin and padding:

事实上，下一个例子证实了我在理论上感到难过...... display:inline 强制浏览器在同一行上显示块元素（div），尊重它们的默认边距和填充：

<div class="brown" style="display:inline">Link one</div> 
<div class="brown" style="display:inline">Link two</div> 
<div class="brown" style="display:inline">Link three</div> 

But the display:inline doesn't force elements to float on the left but only to be managed as inline elements, to clarify this concept look at the big difference between the two example below!

但是display:inline 不会强制元素在左侧浮动，而只是作为内联元素进行管理，为了澄清这个概念，请看下面两个示例之间的巨大差异！

FIRST:

第一的：

<div style="width:800px; text-align: right;">
    <div class="brown" style="display:inline">Link one</div> 
    <div class="brown" style="display:inline">Link two</div> 
    <div class="brown" style="display:inline">Link three</div> 
    <div class="brown" style="display:inline">Link four</div> 
</div>

SECOND:

第二：

<div style="width:800px; text-align: right;">
    <div class="brown" style="float:left">Link one</div> 
    <div class="brown" style="float:left">Link two</div> 
    <div class="brown" style="float:left">Link three</div> 
    <div class="brown" style="float:left">Link four</div>  
</div>

ABOUT THE WIDTH:the display:inline applied on a block element without a fixed width, it force the width to collapse to the minimum value (width of the content + padding), because this is the normal behavior of an inline element.

关于宽度：display:inline 应用于没有固定宽度的块元素，它强制宽度折叠到最小值（内容的宽度 + 填充），因为这是内联元素的正常行为。

The div element, by default, has a width of 100% ... so, when you apply a float:left the width is still set to 100% but the floating on the left force the browser to manage and display its width in an unordinary way! In this case there isn't a general rule, each element has a different behavior!

默认情况下，div 元素的宽度为 100% ...因此，当您应用 float:left 时，宽度仍设置为 100%，但左侧的浮动会强制浏览器管理和显示其宽度不寻常的方式！在这种情况下，没有一般规则，每个元素都有不同的行为！

回答by dnagirl

display: inlinemeans that the element acts like a <span>instead of a <div>: i.e. it is not a block.

display: inline意味着该元素的作用类似于 a<span>而不是 a <div>：即它不是块。

Elements that are floated are not in the normal flow of the document. Hereis a good description.

浮动的元素不在文档的正常流中。 这里有一个很好的描述。

ETA:

预计到达时间：

Try this code. If you can't see the difference then I can't help you.

试试这个代码。如果你看不出区别，那我也帮不了你。

<html>
<head>
<style type="text/css">
p.inlinel {display:inline; width: 4em;}
p.inliner {display:inline; width: 4em; text-align: right;}

p.floatl {width: 4em; float:left;}
p.floatr {width: 4em; float: right;}
</style>
</head>
<body>

<p class='inlinel'>The is an inline paragraph with lots of words.</p>
<p class='inliner'>The is an inline paragraph with lots of words.</p>

<br/><br/>

<p class='floatl'>The is a left floated paragraph with lots of words.</p>
<p class='floatr'>The is a right floated paragraph with lots of words.</p>


</body>
</html>