Moin ich arbeite mich grade in Flexbox ein und frage mich ob es float Komplet ersetzt? und ich float eigentlich vergessen kann?
Flexbox ersetzt float komplett?
-
-
Hey,
Ja. Float kann durch Flexbox ersetzt werden. Flexbox bietet viele tolle Features.
Grüße
-
Flexbox ersetzt float nicht, die haben schlicht unterschiedliche Aufgaben. Genau so wenig wie CSS-Grid ein besseres Flexbox ist. Auch die sind für unterschiedliche Aufgaben erstellt werden.
float ist (musste) früher oft mißbräuchlich verwendet werden, weil es Lösungen wie Flexbox und CSS-Grid nicht gab. Das wurde so zur Gewohnheit, dass vergessen wurde, das float für bestimmte Darstellungen nur eine Notlösung war, die zudem viele unerwünschte Nebenwirkungen verursachte, da die Anwendung nicht so einfach ist, wie viele Webseitenersteller glauben. Die Anwendung von Flexbox und CSS-Grid ist in der Hinsicht viel harmloser.
-
Kannst du mal ein beispiel nennen wo man eher float statt flexbox benutzen würde?
-
Float diente, dient und wird dienen, das Texte andere Elemente umfließen können, in der Regel Bilder, aber auch andere Texte oder Objekte. Mit Flexbox oder CSS-Grid geht das überhaupt nicht.
Beim folgenden Beispiel sind Freeware-Bilder eingefügt deren Ladezeit dauern kann:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>float anwenden 01</title> <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link href="../css/zentrale.css" rel="stylesheet"> --> <style> /*Überschriften - font-family: 'Roboto Slab', Serif;*/ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab); /*Fließtext - font-family: 'Roboto', Sans-Serif";*/ @import url(https://fonts.googleapis.com/css?family=Roboto); /*Zahlen* - font-family: 'Merriweather';*/ @import url(https://fonts.googleapis.com/css?family=Merriweather); /*Basisangaben*/ @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { min-width: 1px; } html { } body { max-width: 1000px; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0.5rem auto 0.5rem auto; } } /*Schriften*/ @media all { html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } h1 { font-family: 'Roboto Slab', serif; font-size: 1.2rem; letter-spacing: 0.1rem; margin: 0.5rem 0rem 0.5rem 0rem; } h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; font-size: 1rem; margin: 0.5rem 0rem 0.5rem 0rem; } p, li, dl, dt, address { font-family: Roboto, sans-serif; font-size: 1rem; font-style: normal; margin: 0.5rem 0rem 0.5rem 0rem; } a { /*darkblue*/ color: hsla(240, 100%, 27%, 1); text-decoration: none; outline: none; margin: 0rem 0rem 0rem 0rem; } figcaption { font-family: Roboto, sans-serif; font-size: 0.9rem; margin: 0rem 0rem 0rem 0rem; } } /*Grafiken*/ @media all { figure { min-width: 1px; max-width: 100%; min-height: 1px; margin: 0rem; } img { min-width: 1px; display: block; max-width: 100%; /*max-height: 100vh;*/ border: 0px; } } /*Spezielles Layout*/ @media all { .content { overflow: hidden; } .float_left { float: left; margin-right: 0.5rem; margin-bottom: 0.5rem; } .float_right { float: right; margin-left: 0.5rem; margin-bottom: 0.5rem; } .info { width: 350px; padding: 0.5rem; border: 2px solid gray; margin: 0.5rem 0rem 0.5rem 0.5rem; } } @media only screen and (min-width: 0px) { } </style> </head> <body> <header id="pageheader" class="pageheader"> <h1>float anwenden</h1> </header> <nav id="navigation" class="navigation"> </nav> <main id="content" class="content"> <h2>Flugzeug</h2> <img class="float_left" src="http://lorempixel.com/400/200/transport/2" alt="Flugzeug"> <p>Ein Flugzeug ist ein Luftfahrzeug, das schwerer als Luft ist und den zu seinem Fliegen nötigen dynamischen Auftrieb mit nicht-rotierenden Auftriebsflächen erzeugt. Der Betrieb von Flugzeugen, die am Luftverkehr teilnehmen, wird durch Luftverkehrsgesetze geregelt.</p> <p>Umgangssprachlich werden Flugzeuge mitunter auch Flieger genannt, der Ausdruck Flieger hat als Hauptbedeutung jedoch den Piloten.</p> <p>Im rechtlichen Sprachgebrauch ist ein Flugzeug ein motorgetriebenes Luftfahrzeug, schwerer als (die von ihm verdrängte) Luft, das seinen Auftrieb durch Tragflächen erhält, die bei gleichbleibenden Flugbedingungen unverändert bleiben, allgemeinsprachlich Motorflugzeug genannt. Wenn in einem Gesetzestext also von Flugzeugen die Rede ist, dann sind immer nur Motorflugzeuge gemeint.</p> <h2>Porsche</h2> <p>Die Porsche AG ist ein deutscher Kraftfahrzeughersteller mit Sitz in Stuttgart-Zuffenhausen. Ursprung des Unternehmens ist ein 1931 von Ferdinand Porsche in Stuttgart gegründetes Konstruktionsbüro, das nach 1945 in einer Automobilfabrik aufging, die vor allem Sportwagen produzierte.</p> <img class="float_right" src="http://lorempixel.com/400/200/transport/5" alt="Porsche"> <p>Die Porsche AG ist seit 2009 Teil des Volkswagen-Konzerns und ist nicht zu verwechseln mit der börsennotierten Porsche Automobil Holding (kurz Porsche SE), die seit 2009 Mehrheitsgesellschafter der Volkswagen AG ist.</p> <p>Am 1. Dezember 1930 machte sich Ferdinand Porsche in Stuttgart, Kronenstraße 24 mit einem eigenen Konstruktionsbüro selbstständig. Er hatte 1893 als Mechaniker bei dem Elektromotorenhersteller Béla Egger & Co. zu arbeiten begonnen. 1897 wurde er im Alter von 22 Jahren Leiter der Versuchsabteilung und war unter anderem an der Entwicklung des Egger-Lohner-Elektromobils, auch als Porsche P1 bezeichnet, beteiligt. Ende 1899 wurde Porsche abgeworben und wechselte als Konstrukteur zu der k.u.k. Hofwagenfabrik Ludwig Lohner & Co. in Wien. Im selben Jahr konstruierte Porsche ein Nachfolgemodell der Elektrokutsche, das auf der Weltausstellung 1900 in Paris unter dem Namen „Lohner-Porsche" vorgestellt wurde.</p> <h2>Intercity-Express</h2> <img class="float_left" src="http://lorempixel.com/300/150/transport/9" alt="Intercity-Express"> <p>Der Intercity-Express (ICE) ist die schnellste Zuggattung der Deutschen Bahn AG. Der Intercity-Express gilt als das Flaggschiff im Schienenpersonenfernverkehr der Deutschen Bahn AG und ist darin der Nachfolger des Intercity (IC). Er bedient, in einem weitgehend getakteten Liniennetz, annähernd 180 ICE-Bahnhöfe in Deutschland und fünf Nachbarländern (Österreich, Schweiz, Frankreich, Belgien und Niederlande).</p> <p>Ebenfalls als „ICE" bezeichnet werden die rund 280 zwischen 1990 und 2019 produzierten Hochgeschwindigkeits-Triebzüge, die von verschiedenen Herstellern stammen. Die Triebzüge verteilen sich auf fünf hauptsächliche Varianten – 60 ICE 1 (Auslieferung von 1991 bis 1993), 44 ICE 2 (Auslieferung 1996 und 1997), 91 ICE mit Neigetechnik (davon 71 elektrische Triebzüge (ICE T) mit Auslieferung von 1999 bis 2006 sowie 20 dieselgetriebene ICE (ICE TD) mit Auslieferung im Jahr 2001), 84 ICE 3 (67 Triebzüge der Baureihen 403 und 406 mit Auslieferung zwischen 2000 und 2006 plus 17 der Baureihe 407 (Velaro D) mit Auslieferung von 2014 bis 2017) sowie etwa 25 Triebzüge der neuesten Generation ICE 4 (Auslieferung Stand 2018), die im Jahr 2017 begonnen hat und erst zwischen 2020 und 2025 abgeschlossen sein wird. Rund 60 ICE Triebzüge verkehren ins Ausland.</p> <p>Sie erreichen im Fahrgastbetrieb Höchstgeschwindigkeiten zwischen 200 und 300 km/h (in Frankreich 320 km/h). Im Jahr 2012 waren 76,6 Millionen Reisende im ICE unterwegs. Die durchschnittliche Reiseweite im ICE lag 2018 bei 331 Kilometern. Im Jahr 2018 beförderten die Züge 94 Millionen Fahrgäste, was einem Tagesdurchschnitt von etwa 260.000 Reisenden entspricht. Dies entspricht etwa 64 Prozent der Reisenden im Fernverkehr der Deutschen Bahn. Die Züge erbrachten dabei mit 31,1 Milliarden Personenkilometern 73 Prozent der Verkehrsleistung.</p> <div class="info float_right"> <h2>Magnetschwebebahn</h2> <p>Magnetschwebebahnen sind spurgeführte Landverkehrsmittel, die durch magnetische Kräfte in der Schwebe gehalten, in der Spur geführt, angetrieben und gebremst werden.</p> </div> <p>Die Grundlagenforschung und Entwicklung des spurgeführten Schnellverkehrs (Rad/Schiene und Magnetschwebebahn) wurde seit Anfang der 1970er Jahre vom Bundesministerium für Forschung und Technologie bis 1990 mit einem Umfang von 450 Millionen D-Mark gefördert. Davon entfielen etwa 70 Millionen D-Mark auf die Entwicklung des ICE.</p> <p>Der ICE-Vorläufer InterCityExperimental wurde am 26. November 1985 der Öffentlichkeit vorgestellt. Am selben Tag stellte der Zug zwischen Gütersloh und Hamm mit 317 km/h einen neuen Weltrekord für Drehstrom-Schienenfahrzeuge auf. In den folgenden Jahren wurden die neu entwickelten Komponenten in ihrem Zusammenwirken bei bislang in Deutschland nicht erreichten Geschwindigkeiten erprobt. Aus den umfangreichen Ergebnissen des Versuchsprogramms sollten schließlich bedarfsgerechte Fahrzeuge für den ab den 1990er Jahren konzipierten Schnellverkehr entwickelt werden können. Darüber hinaus wurde das Fahrzeug bei zahlreichen Präsentationsfahrten eingesetzt, um die Fahrgastakzeptanz zukünftiger Hochgeschwindigkeitszüge zu prüfen, unter anderem im regulären Intercity-Verkehr mit Reisenden. Das Fahrzeug wurde auch für zahlreiche Sonderfahrten eingesetzt, unter anderem unternahm Michail Gorbatschow während eines Staatsbesuchs eine Fahrt mit dem neuen Zug.</p> </main> <aside class="sidebar"> </aside> <footer id="pagefooter" class="pagefooter"> <p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/8994-flexbox-ersetzt-float-komplett/">https://www.html-seminar.de/</a></p> </footer> </body> </html>
-
Hey
MrMurphy : Daran habe ich erstmal nicht gedacht. Stimme dir zu.
Meine Antwort bezog sich dort auf das erstellen des Layouts.Grüße
-
Hallo!
Kennt jemand eine Möglichkeit ohne JavaScript auf der Index-Seite ein Dokument als "Intro" zu zeigen, dass nach dem wegklicken nicht mehr auftaucht?
Es soll dann die "reguläre" Seite angezeigt werden. Mit hover, visited + display: none komme ich nicht weiter.
Grüße Lin
-
Klar.
Du läßt es einblenden mit ajax oder Iframe oder co.
Nach den wegklicken setzt du einen Cookie oder localStorage.
Beim erneuten Seitenladen wird das dann ausgelesen und wenn es schon mal angezeigt wurde läßt man es nicht mehr einblenden
-
Danke für das beispiel also eher in text bereich noch anzuwenden, und bei layout boxen und so dann flex oder? mir würde sonst kein anderes szenario einfallen außer im text bereich mit bilder.
Float diente, dient und wird dienen, das Texte andere Elemente umfließen können, in der Regel Bilder, aber auch andere Texte oder Objekte. Mit Flexbox oder CSS-Grid geht das überhaupt nicht.
Beim folgenden Beispiel sind Freeware-Bilder eingefügt deren Ladezeit dauern kann:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>float anwenden 01</title> <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link href="../css/zentrale.css" rel="stylesheet"> --> <style> /*Überschriften - font-family: 'Roboto Slab', Serif;*/ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab); /*Fließtext - font-family: 'Roboto', Sans-Serif";*/ @import url(https://fonts.googleapis.com/css?family=Roboto); /*Zahlen* - font-family: 'Merriweather';*/ @import url(https://fonts.googleapis.com/css?family=Merriweather); /*Basisangaben*/ @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { min-width: 1px; } html { } body { max-width: 1000px; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0.5rem auto 0.5rem auto; } } /*Schriften*/ @media all { html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } h1 { font-family: 'Roboto Slab', serif; font-size: 1.2rem; letter-spacing: 0.1rem; margin: 0.5rem 0rem 0.5rem 0rem; } h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; font-size: 1rem; margin: 0.5rem 0rem 0.5rem 0rem; } p, li, dl, dt, address { font-family: Roboto, sans-serif; font-size: 1rem; font-style: normal; margin: 0.5rem 0rem 0.5rem 0rem; } a { /*darkblue*/ color: hsla(240, 100%, 27%, 1); text-decoration: none; outline: none; margin: 0rem 0rem 0rem 0rem; } figcaption { font-family: Roboto, sans-serif; font-size: 0.9rem; margin: 0rem 0rem 0rem 0rem; } } /*Grafiken*/ @media all { figure { min-width: 1px; max-width: 100%; min-height: 1px; margin: 0rem; } img { min-width: 1px; display: block; max-width: 100%; /*max-height: 100vh;*/ border: 0px; } } /*Spezielles Layout*/ @media all { .content { overflow: hidden; } .float_left { float: left; margin-right: 0.5rem; margin-bottom: 0.5rem; } .float_right { float: right; margin-left: 0.5rem; margin-bottom: 0.5rem; } .info { width: 350px; padding: 0.5rem; border: 2px solid gray; margin: 0.5rem 0rem 0.5rem 0.5rem; } } @media only screen and (min-width: 0px) { } </style> </head> <body> <header id="pageheader" class="pageheader"> <h1>float anwenden</h1> </header> <nav id="navigation" class="navigation"> </nav> <main id="content" class="content"> <h2>Flugzeug</h2> <img class="float_left" src="http://lorempixel.com/400/200/transport/2" alt="Flugzeug"> <p>Ein Flugzeug ist ein Luftfahrzeug, das schwerer als Luft ist und den zu seinem Fliegen nötigen dynamischen Auftrieb mit nicht-rotierenden Auftriebsflächen erzeugt. Der Betrieb von Flugzeugen, die am Luftverkehr teilnehmen, wird durch Luftverkehrsgesetze geregelt.</p> <p>Umgangssprachlich werden Flugzeuge mitunter auch Flieger genannt, der Ausdruck Flieger hat als Hauptbedeutung jedoch den Piloten.</p> <p>Im rechtlichen Sprachgebrauch ist ein Flugzeug ein motorgetriebenes Luftfahrzeug, schwerer als (die von ihm verdrängte) Luft, das seinen Auftrieb durch Tragflächen erhält, die bei gleichbleibenden Flugbedingungen unverändert bleiben, allgemeinsprachlich Motorflugzeug genannt. Wenn in einem Gesetzestext also von Flugzeugen die Rede ist, dann sind immer nur Motorflugzeuge gemeint.</p> <h2>Porsche</h2> <p>Die Porsche AG ist ein deutscher Kraftfahrzeughersteller mit Sitz in Stuttgart-Zuffenhausen. Ursprung des Unternehmens ist ein 1931 von Ferdinand Porsche in Stuttgart gegründetes Konstruktionsbüro, das nach 1945 in einer Automobilfabrik aufging, die vor allem Sportwagen produzierte.</p> <img class="float_right" src="http://lorempixel.com/400/200/transport/5" alt="Porsche"> <p>Die Porsche AG ist seit 2009 Teil des Volkswagen-Konzerns und ist nicht zu verwechseln mit der börsennotierten Porsche Automobil Holding (kurz Porsche SE), die seit 2009 Mehrheitsgesellschafter der Volkswagen AG ist.</p> <p>Am 1. Dezember 1930 machte sich Ferdinand Porsche in Stuttgart, Kronenstraße 24 mit einem eigenen Konstruktionsbüro selbstständig. Er hatte 1893 als Mechaniker bei dem Elektromotorenhersteller Béla Egger & Co. zu arbeiten begonnen. 1897 wurde er im Alter von 22 Jahren Leiter der Versuchsabteilung und war unter anderem an der Entwicklung des Egger-Lohner-Elektromobils, auch als Porsche P1 bezeichnet, beteiligt. Ende 1899 wurde Porsche abgeworben und wechselte als Konstrukteur zu der k.u.k. Hofwagenfabrik Ludwig Lohner & Co. in Wien. Im selben Jahr konstruierte Porsche ein Nachfolgemodell der Elektrokutsche, das auf der Weltausstellung 1900 in Paris unter dem Namen „Lohner-Porsche" vorgestellt wurde.</p> <h2>Intercity-Express</h2> <img class="float_left" src="http://lorempixel.com/300/150/transport/9" alt="Intercity-Express"> <p>Der Intercity-Express (ICE) ist die schnellste Zuggattung der Deutschen Bahn AG. Der Intercity-Express gilt als das Flaggschiff im Schienenpersonenfernverkehr der Deutschen Bahn AG und ist darin der Nachfolger des Intercity (IC). Er bedient, in einem weitgehend getakteten Liniennetz, annähernd 180 ICE-Bahnhöfe in Deutschland und fünf Nachbarländern (Österreich, Schweiz, Frankreich, Belgien und Niederlande).</p> <p>Ebenfalls als „ICE" bezeichnet werden die rund 280 zwischen 1990 und 2019 produzierten Hochgeschwindigkeits-Triebzüge, die von verschiedenen Herstellern stammen. Die Triebzüge verteilen sich auf fünf hauptsächliche Varianten – 60 ICE 1 (Auslieferung von 1991 bis 1993), 44 ICE 2 (Auslieferung 1996 und 1997), 91 ICE mit Neigetechnik (davon 71 elektrische Triebzüge (ICE T) mit Auslieferung von 1999 bis 2006 sowie 20 dieselgetriebene ICE (ICE TD) mit Auslieferung im Jahr 2001), 84 ICE 3 (67 Triebzüge der Baureihen 403 und 406 mit Auslieferung zwischen 2000 und 2006 plus 17 der Baureihe 407 (Velaro D) mit Auslieferung von 2014 bis 2017) sowie etwa 25 Triebzüge der neuesten Generation ICE 4 (Auslieferung Stand 2018), die im Jahr 2017 begonnen hat und erst zwischen 2020 und 2025 abgeschlossen sein wird. Rund 60 ICE Triebzüge verkehren ins Ausland.</p> <p>Sie erreichen im Fahrgastbetrieb Höchstgeschwindigkeiten zwischen 200 und 300 km/h (in Frankreich 320 km/h). Im Jahr 2012 waren 76,6 Millionen Reisende im ICE unterwegs. Die durchschnittliche Reiseweite im ICE lag 2018 bei 331 Kilometern. Im Jahr 2018 beförderten die Züge 94 Millionen Fahrgäste, was einem Tagesdurchschnitt von etwa 260.000 Reisenden entspricht. Dies entspricht etwa 64 Prozent der Reisenden im Fernverkehr der Deutschen Bahn. Die Züge erbrachten dabei mit 31,1 Milliarden Personenkilometern 73 Prozent der Verkehrsleistung.</p> <div class="info float_right"> <h2>Magnetschwebebahn</h2> <p>Magnetschwebebahnen sind spurgeführte Landverkehrsmittel, die durch magnetische Kräfte in der Schwebe gehalten, in der Spur geführt, angetrieben und gebremst werden.</p> </div> <p>Die Grundlagenforschung und Entwicklung des spurgeführten Schnellverkehrs (Rad/Schiene und Magnetschwebebahn) wurde seit Anfang der 1970er Jahre vom Bundesministerium für Forschung und Technologie bis 1990 mit einem Umfang von 450 Millionen D-Mark gefördert. Davon entfielen etwa 70 Millionen D-Mark auf die Entwicklung des ICE.</p> <p>Der ICE-Vorläufer InterCityExperimental wurde am 26. November 1985 der Öffentlichkeit vorgestellt. Am selben Tag stellte der Zug zwischen Gütersloh und Hamm mit 317 km/h einen neuen Weltrekord für Drehstrom-Schienenfahrzeuge auf. In den folgenden Jahren wurden die neu entwickelten Komponenten in ihrem Zusammenwirken bei bislang in Deutschland nicht erreichten Geschwindigkeiten erprobt. Aus den umfangreichen Ergebnissen des Versuchsprogramms sollten schließlich bedarfsgerechte Fahrzeuge für den ab den 1990er Jahren konzipierten Schnellverkehr entwickelt werden können. Darüber hinaus wurde das Fahrzeug bei zahlreichen Präsentationsfahrten eingesetzt, um die Fahrgastakzeptanz zukünftiger Hochgeschwindigkeitszüge zu prüfen, unter anderem im regulären Intercity-Verkehr mit Reisenden. Das Fahrzeug wurde auch für zahlreiche Sonderfahrten eingesetzt, unter anderem unternahm Michail Gorbatschow während eines Staatsbesuchs eine Fahrt mit dem neuen Zug.</p> </main> <aside class="sidebar"> </aside> <footer id="pagefooter" class="pagefooter"> <p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/8994-flexbox-ersetzt-float-komplett/">https://www.html-seminar.de/</a></p> </footer> </body> </html>
-
Zitat
also eher in text bereich noch anzuwenden
Wenn du float meinst - ja.
Zitatbei layout boxen und so dann flex oder?
flex oder grid, je nachdem, welches von beiden für die Darstellung sinnvoller ist. Die immer wieder aufgestellte Behauptung, grid sei besser oder wertiger als flex oder solle flex gar ersetzen ist sachlich falsch.
-
Hallo!
Kennt jemand eine Möglichkeit ohne JavaScript auf der Index-Seite ein Dokument als "Intro" zu zeigen, dass nach dem wegklicken nicht mehr auftaucht?
Klar.
Du läßt es einblenden mit ajax oder Iframe oder co.
Finde den Fehler...
-
Finde den Fehler...
Hehe, voll übersehen
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!