Ostatnio edytowany:

clear

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości clear

przeznaczenie

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

pozycja

static, relative

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości clear

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

none

Opis

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:#CBFFFF;
      }

      #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

Opis

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:#CBFFFF;
      }

      #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>

both

Opis

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:#CBFFFF;
      }

      #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>