Autor publikacji: Virtual Patriot - Administrator

clear

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - clear property (LV3)

Przeznaczenie właściwości `clear`

Za pomocą właściwości clear możemy określić czy interesujący nas element HTML może opływać pływający element HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `clear`

przeznaczenie

Ponadto nie element HTML będący elementem dzieckiem elementu HTML typu flex, inline-flex, grid lub inline-grid.

nie

brak

tak (animacja schodkowa)

Interpretacja właściwości `clear`

: tak
: tak
: tak
: tak
: tak
: tak

Opis wartości właściwości `clear`

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości clear.

Domyślnie element HTML może opływać pływający element HTML.

Przykład

  clear:none;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-1
float:left;

div#dziecko-2
float:right;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-3

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#dziecko-3" może opływać przykładowe elementy "div#dziecko-1" oraz "div#dziecko-2".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko-1 {
        float:left;
        height:500px;
        background-color:rgba(255, 0, 0, 0.9);
      }

      #dziecko-2 {
        float:right;
        height:400px;
        background-color:rgba(255, 0, 255, 0.9);
      }

      #dziecko-3 {
        background-color:green;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-1">div#dziecko-1<br>float:left;</div>
      <div id="dziecko-2">div#dziecko-2<br>float:right;</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-3">div#dziecko-3</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

left

Wyjaśnienie

Za pomocą wartości left właściwości clear możemy sprawić, że interesujący nas element HTML nie będzie mógł opływać elementu HTML posiadającego właściwość float wraz z wartością left.

Przykład

  clear:left;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-1
float:left;

div#dziecko-2
float:right;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-3

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#dziecko-3" nie może opływać elementu HTML, który posiada właściwość "float" wraz z wartością "left", ponieważ do wspomnianego elementu "div#dziecko-3" została dodana właściwość "clear" wraz z wartością "left".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko-1 {
        float:left;
        height:500px;
        background-color:rgba(255, 0, 0, 0.9);
      }

      #dziecko-2 {
        float:right;
        height:400px;
        background-color:rgba(255, 0, 255, 0.9);
      }

      #dziecko-3 {
        clear:left;
        background-color:green;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-1">div#dziecko-1<br>float:left;</div>
      <div id="dziecko-2">div#dziecko-2<br>float:right;</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-3">div#dziecko-3</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

right

Wyjaśnienie

Za pomocą wartości right właściwości clear możemy sprawić, że interesujący nas element HTML nie będzie mógł opływać elementu HTML posiadającego właściwość float wraz z wartością right.

Przykład

  clear:right;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-1
float:left;

div#dziecko-2
float:right;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-3

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#dziecko-3" nie może opływać elementu HTML, który posiada właściwość "float" wraz z wartością "right", ponieważ do wspomnianego elementu "div#dziecko-3" została dodana właściwość "clear" wraz z wartością "right".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko-1 {
        float:left;
        height:500px;
        background-color:rgba(255, 0, 0, 0.9);
      }

      #dziecko-2 {
        float:right;
        height:400px;
        background-color:rgba(255, 0, 255, 0.9);
      }

      #dziecko-3 {
        clear:right;
        background-color:green;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-1">div#dziecko-1<br>float:left;</div>
      <div id="dziecko-2">div#dziecko-2<br>float:right;</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-3">div#dziecko-3</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

both

Wyjaśnienie

Za pomocą wartości both właściwości clear możemy sprawić, że interesujący nas element HTML nie będzie mógł opływać żadnego pływającego elementu HTML.

Przykład

  clear:both;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-1
float:left;

div#dziecko-2
float:right;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#dziecko-3

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#dziecko-3" nie może opływać żadnego pływającego elementu HTML, ponieważ do wspomnianego elementu "div#dziecko-3" została dodana właściwość "clear" wraz z wartością "both".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko-1 {
        float:left;
        height:300px;
        background-color:rgba(255, 0, 0, 0.9);
      }

      #dziecko-2 {
        float:right;
        height:300px;
        background-color:rgba(255, 0, 255, 0.9);
      }

      #dziecko-3 {
        clear:both;
        background-color:green;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-1">div#dziecko-1<br>float:left;</div>
      <div id="dziecko-2">div#dziecko-2<br>float:right;</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="dziecko-3">div#dziecko-3</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>