display：inline-block和float：left和有什么不一样 [英] What is the difference between display: inline-block and float: left

问题描述

我想知道为什么不总是使用display：inline阻止float：left的INSTEAD。内联块似乎在布局方面更容易控制，并且不必担心必须清除浮标等问题。我试图弄清楚为什么要使用一个而不是另一个。

非常感谢

Emily。

解决方案

float的目的是允许文本环绕它。因此它已移至左侧或右侧，并从页面流中移出。包含其他文本的行框应避免与浮动元素重叠。它形成一个块级的块容器。它与任何其他内容都不垂直对齐。

  body {width：300px ; } .float-example span {float：left;宽度：100px； border：2px dashed red;}  

 < section class =  float-example< Lorem ipsum dolor amet，安乐死地平淡，< span>我喜欢使用float！< span>塞德·杜伊斯莫德临时工和杜勒尔·马尼亚·阿利夸。  

inline-block的目的是成为位于线盒内的块容器。它在内容的正常流中形成一个内联级别的块容器。它与行框中的其他内容垂直对齐。

 正文{width：300px; } .inline-block-example span {display：inline-block;宽度：100px； border：2px dashed red;}  

 < section class =  inline-block-example< Lorem ipsum dolor amet，安全地放音，< span>我喜欢使用inline-block！/ span。塞德·杜伊斯莫德临时工和杜勒尔·马尼亚·阿利夸。  

I'm want to know why not just use display:inline-block all of the time INSTEAD of float:left. Inline-block seems to be much easier to control in terms of layout and not having issues with having to clear floats etc. I'm trying to get my head around why use one instead of the other.

Many thanks,

Emily.

解决方案

The purpose of float is to allow text to wrap around it. So it's moved to the left or right side and taken out of the page flow. Line boxes containing the other text then avoid overlapping with the floated element. It forms a block-level, block container. It is not vertically aligned with any other content.

body {
  width:300px; 
}
.float-example span {
  float:left;
  width: 100px;
  border:2px dashed red;
}

<section class="float-example">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, <span>I like to use float!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>

The purpose on inline-block is to be a block container that sits inside a line box. It forms an inline-level, block container within the normal flow of the content. It's vertically aligned with the other content of the line box it is in.

body {
  width:300px; 
}

.inline-block-example span {
  display:inline-block;
  width: 100px;
  border:2px dashed red;
}

<section class="inline-block-example">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, <span>I like to use inline-block!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</section>

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