CSS-Floating-Schreibmethode

In diesem Kapitel werden hauptsächlich die häufig verwendeten Methoden zum Positionieren und Schweben beschrieben.

1. Floating

Apropos Floating: Wir müssen zunächst über Standard-Streams und Floating-Streams sprechen.

1. Standard-Stream

Standard-Stream ist sehr verbreitet und die Standardmethode von Browsern ist Standard-Stream.
Wie versteht man den Standard-Stream?
Zur Implementierung müssen wir die drei Elementklassifizierungen in CSS kennen.

Inline-Elemente, Block-Level-Elemente, Inline-Block-Level-Elemente

行内元素	块级元素	行内块级元素
不独占一行	独占一行	不独占一行
默认和内容一样宽	默认和父元素一样宽	默认和内容
不可以设置宽高	可以设置宽高	可以设置宽高

Es wird zwischen ungefähr drei Arten von Elementen unterschieden.
Fügen Sie hier einen weiteren Wissenspunkt ein:
In HTML werden Elemente (Tags) normalerweise in zwei Kategorien unterteilt:

容器级标签	文本级标签
p h ul ol li dt等	span/p/em/ins等
可以嵌套其他的所有标签	只可以嵌套文字/图片/超链接

Jetzt können wir über den Standardfluss sprechen:

Da Es gibt zwei Layoutmethoden im Standardfluss, und Inline-Elemente und Inline-Blockebene sind horizontal. Folgen Sie diesem

Floating-Fluss

Floating-Attribute.

clear	清除	float	浮动
left/right	左/右不允许浮动	left/right	左浮动/右浮动
both/none	均不可/不清除	none	不浮动

Beim Floating sind einige Dinge zu beachten:

Floating bezieht sich darauf, wie das Element nach dem Festlegen des Floats um es herum schwebt! ! !

Recht bedeutet beispielsweise, dass die folgenden Elemente links von ihm angeordnet werden! ! !

Der schwebende Fluss unterscheidet nicht zwischen Elementen. Er kann nur horizontal ohne Zentrierung (Mitte) eingegeben werden, und die Breite und Höhe von „margin: 0 auto“ kann nicht verwendet werden.

特点

前一个浮动后面一个没有，那么前面一个会盖住后面一个（文字不会盖住，会环绕在周围），这里可以试着去想想都浮动的排列景象。

先浮动的会在前面，后浮动的会在后面

浮动之后的位置由浮动之前在标准流中的位置来确定，这里主要是理解为浮动后什么元素会受影响

左浮动会去找左浮动，右浮动会跟在右浮动后面

当父元素宽度可以显示所有浮动时，并排显示

浮动的贴靠主要是指当父元素宽度不够时会往前靠，怎么理解呢，就是假如你一个窗口放了很多图片把窗口宽度缩小时图片会自动往下排的现象

Das obige ist der detaillierte Inhalt vonCSS-Floating-Schreibmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!