Heim Web-Frontend HTML-Tutorial CSS基础学习十八:CSS布局之浮动_html/css_WEB-ITnose

CSS基础学习十八:CSS布局之浮动_html/css_WEB-ITnose

Jun 24, 2016 am 11:32 AM

        CSS布局中说到定位就不得不提浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动

框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

       一float属性的定义和用法

       float属性:设置元素浮动

       可能的值:

       none 不浮动,在文档流内,默认

       left  左浮动,脱离文档流

       right 右浮动,脱离文档流

       inherit规定应该从父元素继承 float属性的值。

       float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何

元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确

的宽度;否则,它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这

个过程会持续到某一行拥有足够的空间为止。

      我们用图示和实例来理解元素的浮动:

      (1)三个不浮动元素的图示和效果:


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>CSS甯</title>
Nach dem Login kopieren
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusionssystem, erklärt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Flüstern des Hexenbaum
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1677
14
PHP-Tutorial
1280
29
C#-Tutorial
1257
24
HTML: Die Struktur, CSS: Der Stil, JavaScript: Das Verhalten HTML: Die Struktur, CSS: Der Stil, JavaScript: Das Verhalten Apr 18, 2025 am 12:09 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.

Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends Apr 19, 2025 am 12:02 AM

Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.

Die Zukunft von HTML: Evolution und Trends im Webdesign Die Zukunft von HTML: Evolution und Trends im Webdesign Apr 17, 2025 am 12:12 AM

Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.

HTML vs. CSS vs. JavaScript: Ein vergleichender Überblick HTML vs. CSS vs. JavaScript: Ein vergleichender Überblick Apr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

HTML vs. CSS und JavaScript: Vergleich von Webtechnologien HTML vs. CSS und JavaScript: Vergleich von Webtechnologien Apr 23, 2025 am 12:05 AM

HTML, CSS und JavaScript sind die Kerntechnologien zum Erstellen moderner Webseiten: 1. HTML Definiert die Webseitenstruktur, 2. CSS ist für das Erscheinen der Webseite verantwortlich.

Jenseits von HTML: Wesentliche Technologien für die Webentwicklung Jenseits von HTML: Wesentliche Technologien für die Webentwicklung Apr 26, 2025 am 12:04 AM

Um eine Website mit leistungsstarken Funktionen und guten Benutzererfahrungen zu erstellen, reicht HTML allein nicht aus. Die folgende Technologie ist auch erforderlich: JavaScript verleiht Webseiten dynamisch und interaktiv, und Echtzeitänderungen werden durch den Betrieb von DOM erreicht. CSS ist für den Stil und das Layout der Webseite verantwortlich, um die Ästhetik und die Benutzererfahrung zu verbessern. Moderne Frameworks und Bibliotheken wie React, Vue.js und Angular verbessern die Entwicklungseffizienz und die Struktur der Codeorganisation.

Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags? Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags? Apr 28, 2025 pm 05:42 PM

Der Artikel erörtert die Unterschiede zwischen HTML -Tags, und sich auf ihre semantischen und präsentierenden Verwendungen und ihre Auswirkungen auf SEO und Barrierefreiheit konzentrieren.

HTML als Markup -Sprache: seine Funktion und ihren Zweck HTML als Markup -Sprache: seine Funktion und ihren Zweck Apr 22, 2025 am 12:02 AM

Die Funktion von HTML besteht darin, die Struktur und den Inhalt einer Webseite zu definieren, und der Zweck besteht darin, eine standardisierte Möglichkeit zur Anzeige von Informationen bereitzustellen. 1) HTML organisiert verschiedene Teile der Webseite über Tags und Attribute wie Titel und Absätze. 2) Es unterstützt die Trennung von Inhalten und Leistung und verbessert die Wartungseffizienz. 3) HTML ist erweiterbar, sodass benutzerdefinierte Tags SEO verbessern können.

See all articles