Pływak - CSS-Tricks

Anonim

floatNieruchomość w CSS służy do pozycjonowania i układ na stronach internetowych.

.module ( float: left; )

Wartości

  • none: element nie pływa. To jest wartość początkowa.
  • left: przenosi element na lewo od jego kontenera.
  • right: przenosi element na prawo od jego kontenera.
  • inherit: element dziedziczy ruch zmiennoprzecinkowy swojego rodzica.
Uwaga: element pływający jest automatycznie display: block;

Co oznacza float?

Aby zrozumieć cel i pochodzenie float, możemy spojrzeć na projekt nadruku. W układzie wydruku obrazy mogą być umieszczane na stronie w taki sposób, aby tekst zawijał się wokół nich w razie potrzeby. Jest to powszechnie i odpowiednio nazywane „zawijaniem tekstu”. Oto przykład.

W programach do projektowania układu strony można powiedzieć, że ramki zawierające tekst mają przestrzegać zawijania tekstu lub je ignorować. Zignorowanie zawijania tekstu pozwoli słowom przepłynąć bezpośrednio po obrazie, jakby go tam nie było. To jest różnica między tym obrazem, który jest częścią przepływu strony (lub nie). Projektowanie stron internetowych jest bardzo podobne.

W projektowaniu stron internetowych elementy strony z floatzastosowaną właściwością CSS są takie same, jak obrazy w układzie wydruku, gdzie tekst opływa je. Elementy pływające pozostają częścią przepływu strony internetowej. Różni się to wyraźnie od elementów strony, które używają pozycjonowania bezwzględnego. Absolutnie pozycjonowane elementy strony są usuwane z przepływu strony internetowej, tak jak wtedy, gdy pole tekstowe w układzie wydruku ma ignorować zawijanie strony. Absolutnie pozycjonowane elementy strony nie będą miały wpływu na położenie innych elementów, a inne elementy nie będą miały na nie wpływu, niezależnie od tego, czy się stykają, czy nie.

Próbny

To demo przedstawia artykuł z dwoma obrazami: jednym ustawionym na float: left, a drugim ustawionym na float: right. Naciśnij przycisk „Przełącz pływaki”, aby włączyć lub wyłączyć pływaki.

Zobacz przykład przesuwania pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Pływa do układu

Oprócz prostego przykładu zawijania tekstu wokół obrazów, do tworzenia całych układów stron internetowych można używać elementów pływających .

Pływaki są również pomocne przy układaniu w mniejszych instancjach. Weźmy na przykład ten mały obszar strony internetowej. Jeśli użyjemy floatdla naszego obrazu awatara, gdy ten obraz zmieni rozmiar, tekst w polu zostanie ponownie wypełniony, aby go pomieścić:

Ten sam układ można by osiągnąć przy użyciu względnego pozycjonowania w kontenerze i bezwzględnego pozycjonowania również w awatarze. Ale gdy zostanie to zrobione w ten sposób, awatar nie będzie miał wpływu na tekst i nie będzie w stanie wpłynąć na zmianę rozmiaru.

Próbny

To demo pokazuje awatar z float: leftaplikacją. Naciśnij przycisk „Przełącz rozmiar obrazu”, aby zobaczyć szerszą wersję obrazu awatara. Zauważ, że tekst przepływa, aby pomieścić obraz zamiast przesuwać się po nim.

Zobacz demo Pen Float autorstwa CSS-Tricks (@ css-tricks) na CodePen.

Oczyszczanie pływaka

Siostrzaną własnością Floata jest clear. Element, który ma clearustawioną właściwość, nie przesunie się w górę obok elementu zmiennoprzecinkowego, jak tego pragnie, ale przesunie się w dół poza element pływający. Ponownie ilustracja jest bardziej pomocna niż słowa:

W powyższym przykładzie pasek boczny jest przesunięty w prawo i jest krótszy niż główny obszar zawartości. Stopka jest następnie wymagana, aby wskoczyć do dostępnej przestrzeni, zgodnie z wymaganiami pływaka. Aby rozwiązać ten problem, stopkę można wyczyścić, aby upewnić się, że pozostaje pod obiema ruchomymi kolumnami.

#footer ( clear: both; )

Clear ma również cztery prawidłowe wartości. Wartość bothjest najczęściej używana, która usuwa elementy pływające dochodzące z dowolnego kierunku. Wartości lefti rightmogą być używane odpowiednio do usuwania pływaka tylko z jednego kierunku. Wartość początkowa to none, która zwykle jest niepotrzebna, chyba że jest używana do jawnego usuwania clearwartości, która została ustawiona. Wartość inheritsprawia, że ​​element dziedziczy clearwartość swojego rodzica . O dziwo, Internet Explorer nie obsługiwał tej wartości aż do IE8.

Oczyszczanie tylko leftlub rightfloat, choć rzadziej spotykane na wolności, z pewnością ma swoje zastosowania.

Wielki upadek

Jedną z bardziej zaskakujących rzeczy związanych z pracą z elementami zmiennoprzecinkowymi jest to, jak mogą wpływać na element, który je zawiera (ich element „nadrzędny”). Jeśli element nadrzędny zawiera tylko elementy pływające, jego wysokość zwinie się do zera. Nie zawsze jest to oczywiste, jeśli rodzic nie ma żadnego zauważalnego wizualnie tła, ale ważne jest, aby być tego świadomym.

Choć może się wydawać sprzeczne z intuicją, załamanie się, alternatywa jest gorsza. Rozważ ten scenariusz:

Gdyby element blokowy na górze miałby się automatycznie rozszerzyć, aby pomieścić element pływający, mielibyśmy nienaturalne przerwy w przepływie tekstu między akapitami, bez praktycznego sposobu na ich naprawienie. Gdyby tak było, my, projektanci, narzekalibyśmy znacznie bardziej na takie zachowanie niż na załamanie.

Prawie zawsze trzeba się zająć zwijaniem, aby zapobiec dziwnemu układowi i problemom z różnymi przeglądarkami. Naprawiamy to, usuwając pływak za pływającymi elementami w kontenerze, ale przed zamknięciem kontenera.

Techniki usuwania pływaków

Jeśli jesteś w sytuacji, w której zawsze wiesz, jaki będzie następny element, możesz zastosować clear: both;wartość do tego elementu i zająć się swoim biznesem. Jest to idealne rozwiązanie, ponieważ nie wymaga wymyślnych hacków ani dodatkowych elementów, dzięki czemu jest idealnie semantyczne. Oczywiście rzeczy zazwyczaj nie działają w ten sposób i musimy mieć więcej narzędzi do czyszczenia pływaków w naszym zestawie narzędzi.

  • Metoda Empty Div to dosłownie pusty element div. . Czasami zobaczysz
    element lub inny losowy element, ale najczęściej występuje div, ponieważ nie ma domyślnego stylu przeglądarki, nie ma żadnej specjalnej funkcji i jest mało prawdopodobne, aby był stylizowany ogólnie za pomocą CSS. Ta metoda jest odrzucana przez semantycznych purystów, ponieważ nie ma ona kontekstowego znaczenia dla strony i służy wyłącznie do prezentacji. Oczywiście w ścisłym sensie mają rację. Ale wykonuje swoją pracę i nikomu nie szkodzi.
  • Metoda przepełnienia polega na ustawieniu overflowwłaściwości CSS w elemencie nadrzędnym. Jeśli ta właściwość jest ustawiona na autolub hiddenna elemencie nadrzędnym, element nadrzędny rozszerzy się, aby zawierał elementy zmiennoprzecinkowe, skutecznie usuwając je z kolejnych elementów. Ta metoda może być pięknie semantyczna, ponieważ może nie wymagać dodatkowych elementów. Jeśli jednak zauważysz, że dodasz nowy, divaby to zastosować, jest on równie niesemantyczny jak divmetoda pusta i mniej podatny na adaptację. Należy również pamiętać, że właściwość overflow nie jest przeznaczona specjalnie do czyszczenia wartości zmiennoprzecinkowych. Uważaj, aby nie ukrywać treści ani nie uruchamiać niechcianych pasków przewijania.
  • Metoda Easy Clearing (znana również jako „clearfix”) używa sprytnego pseudo selektora CSS ( :after) do czyszczenia elementów zmiennoprzecinkowych. Zamiast ustawiać przepełnienie na rodzicu, możesz zastosować do niego dodatkową klasę, taką jak „clearfix”. Następnie zastosuj ten CSS: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    Spowoduje to zastosowanie niewielkiej ilości ukrytej zawartości po elemencie nadrzędnym, który czyści zmiennoprzecinkowy. To nie wszystko, ponieważ należy użyć dodatkowego kodu, aby dostosować się do starszych przeglądarek. Uwaga: zobacz także ten fragment, który śledzi najnowsze i najlepsze poprawki, w tym nowszą „mikro poprawkę”.

Różne scenariusze wymagają różnych metod rozliczania typu float. Weźmy na przykład siatkę bloków, każdy z różnych typów.

Aby lepiej wizualnie połączyć podobne bloki, chcemy rozpocząć nowy wiersz według własnego uznania, w tym przypadku, gdy zmieni się kolor. Moglibyśmy użyć metody przepełnienia lub łatwego czyszczenia, gdyby każda z grup kolorów miała element nadrzędny. Lub używamy pustej metody div pomiędzy każdą grupą. Trzy zawijające się elementy div, które wcześniej nie istniały, lub trzy po elementach div, które wcześniej nie istniały. Pozwolę ci zdecydować, co jest lepsze.

Problemy z pływakami

Pływaki często są uderzane za kruchość. Większość tej kruchości pochodzi z błędów w IE6 i IE7. Gdy te przeglądarki znikają w przeszłości, te błędy znikają wraz z nimi. Ale nadal warto je zrozumieć, jeśli kiedykolwiek będziesz musiał debugować „OldIE”.

  • Przesunięcie w dół to objaw, że element wewnątrz elementu pływającego jest szerszy niż sam element pływający (zwykle jest to obraz). Większość przeglądarek renderuje obraz poza elementem pływającym, ale część wystająca nie ma wpływu na inny układ. Stare wersje IE rozszerzały pływak, aby zawierał obraz, często drastycznie wpływając na układ. Typowym przykładem jest obraz wystający z głównej treści po naciśnięciu paska bocznego poniżej.

    Szybka naprawa: upewnij się, że nie masz żadnych obrazów, które to robią, użyj, overflow: hidden;aby odciąć nadmiar.

  • Błąd podwójnego marginesu - Inną rzeczą do zapamiętania podczas korzystania z IE 6 jest to, że jeśli zastosujesz margines w tym samym kierunku co zmiennoprzecinkowy, to podwoi on margines. Szybka poprawka: ustaw display: inlinena pływaku i nie martw się, pozostanie elementem blokowym.
  • 3px Jog jest, gdy tekst jest do góry obok powierzchnia tynku elementu jest tajemniczo wyrzucony z dala od 3PX niczym dziwnym siłowe wokół pływaka. Szybka poprawka: ustaw szerokość lub wysokość tekstu, na który ma to wpływ.
  • W IE 7 błąd dolnego marginesu polegał na tym, że jeśli pływający rodzic umieścił w nim elementy podrzędne, dolny margines tych dzieci jest ignorowany przez rodzica. Szybka naprawa: zamiast tego użyj wyściółki dolnej części rodzica.

Alternatywy

Jeśli potrzebujesz zawijania tekstu wokół obrazów, naprawdę nie ma żadnej alternatywy dla float. A skoro o tym mowa, wypróbuj tę dość sprytną technikę zawijania tekstu wokół nieregularnych kształtów. Ale jeśli chodzi o układ strony, na pewno są wybory. Eric Sol opublikował artykuł na temat A List Apart, Faux Absolute Positioning, który opisuje bardzo interesującą technikę, która na wiele sposobów łączy elastyczność pływaków z siłą pozycjonowania absolutnego.

CSS3 radzi sobie z układem strony na kilka sposobów:

  • Flexbox
  • Układ wielokolumnowy
  • Układ siatki

Absolutnie pozycjonowane elementy zmiennoprzecinkowe (np. Pozycjonujesz absolutnie jako normalne, ale element nadal może wpływać na inne elementy, na przykład otaczać go tekstem), ale myślę, że pomysł został odłożony na półkę ze względu na podobieństwa do innych, bardziej solidnych pomysłów na układ.

Wideo

Zrobiłem screencast jakiś czas temu, wyjaśniając wiele z tych koncepcji float.

Związane z

  • clear
  • position

Więcej informacji

  • float w specyfikacji W3C
  • float w MDN

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
Wszystko Wszystko Wszystko Wszystko Wszystko Wszystko Wszystko