CSS Float, Clear i przepełnienie właściwości | Wyjaśnione

Pozycjonowanie elementów HTML w odpowiednich miejscach jest bardzo znaczące przy projektowaniu układu strony internetowej. CSS zapewnia wiele właściwości pozycjonowania, które pomagają programistom w lepszej strukturze pozycji elementów HTML.

Poza tym, podczas opracowywania strony internetowej, często spotykamy pewne okoliczności, w których zawartość zawierająca w niektórych elementach HTML przepełnia. Aby poradzić sobie z takimi sytuacjami CSS zapewnia również pewne właściwości.

W tym przewodniku przejdziesz przez następujące właściwości CSS.

1. Float Property
2. Jasna własność
3. Nieruchomość przepełnienia

Zaczynajmy.

Float Property

Właściwość Float jest określana jako właściwość pozycjonowania, która jest wykorzystywana do pozycjonowania zawartości i struktury układu witryny. Ta właściwość pozycjonuje element w taki sposób, że inne elementy owijają się.

Składnia

float: wartość;

Podobnie jak inne właściwości CSS, właściwość Float renderuje pewne wartości, które są wymienione poniżej.

Wartość	Opis
nic	Jest to wartość domyślna, która zapobiega pływaniu elementu i wyświetla element, w którym istnieje w tekście.
lewy	Aby unosić element po lewej stronie, ta wartość jest używana.
Prawidłowy	Aby unosić element po prawej stronie, ta wartość jest używana.
wstępny	Przypisywa pierwotną wartość do właściwości, którą ta wartość jest używana.
dziedziczyć	Aby odziedziczyć tę właściwość z właściwości nadrzędnej, wartość ta jest używana.

Oto kilka przykładów właściwości pływakowej.

Przykład 1
Załóżmy, że wyświetlasz trochę tekstu na swojej stronie internetowej i chcesz dodać odpowiedni obraz po prawej stronie tekstu. Użyj następującego fragmentu kodu.

Html

Psy są wyjątkowo lojalnymi stworzeniami. Są urocze, zabawni i są najlepszym przyjacielem mężczyzny. Istnieje wiele ras psów. Niektóre rasy psów to Bull Dog, Siberian Husky, Golden Retriever i wiele innych.

CSS

img
Float: Racja;
Szerokość: 190px;
Wysokość: 170px;

W powyższym przykładzie napisaliśmy trochę tekstu o psach i przekształciliśmy obraz psa na prawą stronę. Oto wyjście.

Obraz psa unosił się odpowiednio do.

Jeśli w tym samym przykładzie właściwość Float jest ustawiona na „Brak” zamiast „po prawej”, obraz psa zostanie wyświetlony tam, gdzie występuje w tekście. Oto, jak to będzie wyglądać.

Przykład 2
Czasami, aby dodać piękno do tekstu pojawiającego się na stronie internetowej, używasz różnych rodzin i rozmiarów czcionek. Oprócz tego unoszącego się tekstu do odpowiedniej pozycji jest również dość ważne. Ten przykład pokazuje, jak unosić literę w akapicie.

Html

DOG są wyjątkowo lojalnymi stworzeniami. Są urocze, zabawni i są najlepszym przyjacielem mężczyzny. Jest wiele
rasy psów. Niektóre rasy psów to Bull Dog, Siberian Husky, Golden Retriever i wiele innych. Jeśli przechodzisz
Depresja lub pewna zła faza w życiu, ognianie psa jest wysoce sugerowane. Oprócz tych psów są również używane do bezpieczeństwa
cele.

CSS

Zakres
float: lewy;
szerokość: 0.8em;
Wysokość linii: 90%;
Rozmiar czcionki: 60px;
Font-Weight: Bold;
Font Family: Times New Roman;

W powyższym przykładzie unosimy pierwszą literę tekstu po lewej stronie i nadajemy mu określony styl. Wyjście pokazano poniżej.

Pierwsza litera z powodzeniem unosiła się po lewej stronie.

Teraz, gdy zrozumieliśmy właściwość Float CSS, dowiedzmy się o właściwości CSS Clear.

Jasna własność

Wyraźna właściwość jest również właściwością pozycjonującą, która obsługuje elementy obok pływanych elementów.

Jeśli przypiszesz właściwość Clear do elementu w tym samym kierunku, co pływak, zostanie ona zepchnięta w dół pod pływanymi elementami, w przeciwnym razie, jeśli będzie wystarczająca ilość miejsca, element będzie pasował obok elementu pływanego w poziomie.

Składnia

jasne: wartość;

Wyczyść właściwość wykazuje niektóre wartości, które zostały wyjaśnione poniżej.

Wartość	Opis
nic	Jest to wartość domyślna, która zapobiega wyczyszczeniu pływanych elementów.
lewy	Ta wartość pozycjonuje elementy w dół po lewej stronie elementów pływających.
Prawidłowy	Ta wartość pozycjonuje elementy po prawej stronie pływających elementów.
Zarówno	Ta wartość pozycjonuje elementy zarówno w lewo, jak i po prawej stronie pływanych elementów.
wstępny	Ta wartość przypisuje właściwość jej pierwotną wartość.
dziedziczyć	Aby odziedziczyć tę właściwość z właściwości nadrzędnej, wartość ta jest używana.

Zbadajmy wyraźną właściwość za pomocą odpowiednich przykładów.

Przykład 1
Dowiemy się, jak działa wyraźna własność przy użyciu przykładu psa wymienionego w powyższej sekcji.

Html

Psy są wyjątkowo lojalnymi stworzeniami. Są urocze, zabawni i są najlepszym przyjacielem mężczyzny. Istnieje wiele ras psów. Niektóre rasy psów to Bull Dog, Siberian Husky, Golden Retriever i wiele innych.

CSS

img
float: lewy;
szerokość: 170px;
Wysokość: 170px;

Teraz w powyższym przykładzie istnieją dwa elementy

I . Jednak tylko unosi się w lewo. Teraz, aby zrozumieć, jak działa jasna nieruchomość, zastosujemy jasne do

element. Użyj następującego fragmentu kodu.

P.jasne
Clear: lewy;

Tutaj zastosowaliśmy jasne do

w tym samym kierunku co pływak.

Wyjście
Przed zastosowaniem jasności.

Po zastosowaniu jasnego.

Tekst został oczyszczony z lewej strony pływanego obrazu.

Możesz użyć innych wartości jasnej właściwości za pomocą powyższego przykładu, aby zobaczyć, jak działają.

Nieruchomość przepełnienia

Właściwość przepełnienia kontroluje zachowanie treści, które przepełnia określony obszar elementu, a ponadto właściwość przepełnienia jest zaprojektowana tylko dla elementów na poziomie blokowym.

Składnia

przepełnienie: wartość;

Różne wartości właściwości przepełnienia podano poniżej:

Wartość	Opis
widoczny	Jest to wartość domyślna i wyświetli całą zawartość, która przekracza określony obszar elementu.
ukryty	Ta wartość ukrywa wszystkie treści przekraczające określony obszar elementu.
zwój	Ta wartość ukrywa zawartość, która przekracza obszar elementu w niej i zapewnia zarówno pionowe, jak i poziome paski przewijania do wyświetlenia treści.
automatyczny	Ta wartość dodaje pasek przewijania tylko w razie potrzeby.
wstępny	Ta wartość przypisuje właściwość jej pierwotną wartość.
dziedziczyć	Aby odziedziczyć tę właściwość z właściwości nadrzędnej, wartość ta jest używana.

Teraz, aby lepiej zrozumieć tę właściwość, rozważymy jeden przykład i za pośrednictwem tego zademonstrujemy różne wartości właściwości przepełnienia.

Przykład.

W tym przykładzie utworzymy A i umieścić w tym trochę treści i zobaczymy, jak działają różne wartości właściwości przepełnienia.

Html

Właściwość przepełnienia kontroluje zachowanie treści, które przepełnia określony obszar elementu, a ponadto właściwość przepełnienia jest zaprojektowana tylko dla elementów na poziomie blokowym.

Najpierw zilustrujmy widoczną wartość właściwości przepełnienia.

CSS

.div1
Przepełnienie: widoczne;
kolor tła: Rosybrown;
szerokość: 100px;
Wysokość: 145px;
Border: 2px Solid Black;

Wyjście

Korzystając z widocznej wartości właściwości przepełnienia, zawartość jest wyświetlana poza obszarem pudełka.

Teraz zilustrujemy ukrytą wartość właściwości przepełnienia. Oto fragment kodu.

.div1
Olflow: ukryty;

Wyjście

Treść przekraczająca obszar pudełka jest ukryta.

Fragment kodu dla wartości przewijania właściwości przepełnienia jest następujący.

.div1
Overflow: Scroll;

Wyjście

Za pomocą pasków przewijania można obejrzeć resztę treści.

A teraz zobaczymy, jak działa wartość automatyczna właściwości przepełnienia.

.div1
przepełnienie: auto;

Wyjście

Zgodnie z wymogiem wartość automatyczna dodała tylko pionowy pasek przewijania.

Korzystając z wartości automatycznej, przepełniająca się zawartość jest pomyślnie ukryta w polu.

Wniosek

Float Property jest używany do pozycjonowania treści i strukturyzacji układu witryny, ponadto, ta właściwość pozycjonuje element w taki sposób, że inne elementy owijają się. jasna własność, Z drugiej strony obsługuje elementy, które znajdują się obok pływanych elementów. Tymczasem Nieruchomość przepełnienia kontroluje zachowanie treści, które przepełnia określony obszar elementu. Wszystkie te właściwości wykazują pewne wartości, które wykonują różne działania w tych właściwościach. Te właściwości i ich wartości są szczegółowo wyjaśnione za pomocą przykładów w tym zapisie.