Shulou(Shulou.com)05/31 Report--

This article "CSS display:inline and float:left what is the difference" Most people do not understand the knowledge points of the article, so Xiaobian to everyone summarized the following content, detailed content, clear steps, has a certain reference value, I hope you can read this article to gain something, let's take a look at this article "CSS display:inline and float:left what is the difference" article bar.

CSS display:inline and float:left

CSS display refers to the display state, inline means inline, characterized by close to the previous inline element, usually the default inline elements are span,a,em,strong, etc. Float:left is a floating form for block-level elements, two states of different forms.

CSS display:inline; and float:left; are correct. CSS display:inline; Text in the CSS Authority Guide states that any visible element that is not a block-level element is inline. The characteristic of its presentation is the "row layout" form, where "row layout" means that its presentation is always displayed in rows. For example, if we set an inline element border-bottom:1pxsolid#000;, it appears to repeat on each line, with a thin black line below each line. If it is a block-level element, the black line displayed will only appear below the block.

Of course this doesn't seem like the difference between CSS display:inline; and float:left;, but once we understand the nature of float:left; then we know exactly what's going on. float:left; A special layout feature that takes the specified element out of the normal document flow. FLOAT must also be applied to block-level elements, meaning float is not applied to inline tags. Or in other words, when FLOAT is applied then the element is designated as a block-level element.

Then we are clear that inline (CSS display:inline;) elements cannot be set to width and height, because inline is a row layout, and its characteristic is to be laid out in a row, so it cannot be set to width and height.

Run Code:

float&inline *{text-align:center;padding:4px;} div,p{text-align:left;} span{background:#f5f5f5;border-left:1px#eeesolid; border-top:1px#eeesolid;border-right:1px#cccsolid; border-bottom:1px#cccsolid;} ul#inlineli{display:inline;list-style:none;border-left:1px#cccsolid;width:300px;background:#f5f5f5;;} ul#floatli{float:left;display:inline;list-style:none; border-left:1px#666solid;width:300px;background:#f5f5f5;} span For inline/inline elements, assigning width to them has no effect. span is an inline element Give it width 100px+float:right; you can see that it has width.

This li is defined as inline, setting width has no effect

test test

This li is defined as inline+float:left, setting the width has an effect

test test The above is about the content of this article "What is the difference between display:inline and float:left in CSS". I believe everyone has a certain understanding. I hope that the content shared by Xiaobian will help everyone. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.