Cara Menggunakan Property Float Pada CSS

Hallo teman-teman apa kabar semuanya, jumpa lagi dengan saya pada tutorial Dumet School. Di artikel kali ini kita akan belajar Cara Menggunakan Property Float Pada CSS seperti yang kita tahu arti dari kata float yang berarti mengapung. Sebuah elemen bisa diposisikan seolah-olah berada mengapung diantara elemen setelahnya. Mengapung disini, berarti elemen yang mengalami float dan akan dipindahkan ke tepi paling kiri (float:left) atau tepi paling kanan (float:right) dari element parrent nya.

Baik, sekarang langsung saja kita praktekkan. Seperti biasa teman-teman siapkan text editornya dan copy script html nya di bawah ini

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Menggunakan Property Float Pada CSS</title>
  </head>
  <body>
    <header>
      <h1>LOGO</h1>
    </header>

    <article>
        <div class="articleLeft">
          <h1>Belajar CSS Float </h1>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting  industry.
               Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
               when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
               It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
               It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
               and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
        <div class="articleRight">
          <h1>Belajar CSS Float </h1>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting  industry.
               Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
               when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
               It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
               It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
               and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </article>
    <footer>
      <small>Copyright&copy; 2017 Dumet School.</small>
    </footer>

  </body>
</html>

Kemudian save dengan nama index.html, lalu tambagkan css nya di bawah ini

<style type="text/css">
    header{
    	width: 900px;
    	margin: auto;
    	height: 100px;
    	background: grey;
    }
    article{
    	width: 900px;
    	margin: auto;
    	background: aqua;
    	overflow: hidden;
    }
    .articleLeft {
		width:450px;
		background: red;
	}
	.articleRight {
		width:450px;
		background: pink;
	}
	footer {
		clear: both;
		text-align: center
	}
	footer{
		background: yellow;
		width:900px;
		margin: auto;
		height: 50px;
	}
    </style>

Jika sudah, save dan jalankan pada browser nya. Maka hasil sementara seperti gambar di bawah ini

Hasil di atas ini belum kita berikan property float, langkah berikutnya kita akan implementasikan Cara Menggunakan Property Float Pada CSS. Tambahkan float pada (class:articleLeft) dengan float:left dan (class:articleRight) dengan float:right

Jika sudah save dan refresh pada browser nya

Nah seperti yang kalian lihat pada (class:articleLeft) sudah bergeser kekiri dan (class:articleRight)  bergeser kekanan, karena masing-masing class saya berikan width 450px dimana parrent (tag <article>) memiliki width 900px maka (900 : 2 = 450) float akan berfungsi. Tetapi jika (class:articleLeft) dan (class:articleRight) saya berikan 455px maka float tidak akan berfungsi karena melebihi pembagian dari parrent (tag <article>) yang memiliki width 900px.

Cukup mudah bukan,,,?!?

Oke sekian dulu pada artikel kali ini tentang Cara Menggunakan Property Float Pada CSS, kita jumpa lagi di tutorial berikutnya. Terimakasih dan Sampai Jumpa. Semoga bermanfaat 🙂