web-dev-qa-db-ja.com

'display：block;との違いfloat：左」対「表示：インラインブロック; float：左 '？

左に浮かぶ要素（たとえば、画像）に表示があるかどうかに実際的な違いはありますか。デフォルトの表示を残すのではなく、それに適用されます：ブロック;ルールが適用されましたか？

つまり、次の違いは何ですか。

<div style="float: left; display: inline-block;">text</div>

そして

<div style="float: left; display: block;">text</div>

？

htmlcss-floatblockcss
14
alloy

@thirtydotの回答が役立つ場合があります... 質問のリンク

要素をフローティングするとブロックになることもわかったので、floatプロパティとdisplay:blockの指定は冗長です。

はい、display: block（またはright）を指定した場合、float: leftは冗長です。

（display：inlineとfloat：leftを指定しようとするとどうなりますか？）

display: inlineを設定するとfloat: leftが「何でも」を強制するため、display: blockは何の違いもありません。

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

それ以外の場合、「float」の値が「none」以外の場合、ボックスはフロートされ、「display」は次の表に従って設定されます。

上記の表を要約すると、float = display: block。

ただし、float: left; display: inlineの具体的な例は便利です- IE6のバグを修正します

注意すべき他の冗長な組み合わせの例はありますか？ブロックと幅？等、

いくつかの例：

  • position: absoluteを設定すると、float: noneが強制されます。
  • topがデフォルトのright以外の値に設定されていない限り、bottom、left、position、staticプロパティは効果がありません。

そのようなことをチェックできるツールはありますか？

私はそうは思いませんそうです。これは必要なものではないので、なぜこのようなツールを誰が書いたのかわかりません。

14
Awesomestvi

同じ要素にfloat: leftとdisplay: inline-blockを指定する必要はありません。両方ではなく、どちらか一方を使用します。フロートは、要素の周りにテキストをフロートさせるために使用されます。レイアウトを行うときに選択するのに最適な武器ではありません。ディスプレイで移動：ブロック、インラインブロック。

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

ブロック要素— cssボックスモデルに従ってボックスを形成します。幅、高さ、パディング、ボーダー、マージンがあり、縦に積み重ねられます。

インライン要素—ボックスを形成しません。彼らは水平に隣同士に座っています。

インラインブロック要素—ボックスを形成する内側のブロック要素のように動作します。外側では、要素を積み重ねるのではなく、横に並べて配置するインライン要素のように機能します。

良いリソース： http://learnlayout.com/inline-block.html

SitePointによると：

CSSレイアウトを初めて使用する場合は、想像力に富んだ方法でCSSフロートを使用することがスキルの高さであると考えることは許されます。あなたが見つけることができる限り多くのCSSレイアウトのチュートリアルを使用している場合、フロートの習得は通過儀礼であると考えるかもしれません。工夫に驚かされ、複雑さに驚かされます。フロートがどのように機能するかを最終的に理解すると、達成感を得ることができます。

だまされてはいけません。あなたは洗脳されています。

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

5
António Regadas

float: left;を使用すると、ほとんどすべての要素がblock要素として動作します。したがって、この特定のケースでは違いはありません。

enter image description here

2
Seva Arkhangelskiy