Perbedaan Property CSS Overflow dan Clear

Hallo sahabat dumenity berjumpa lagi dengan saya, masih dalam artikel DumetschoolÂ pada artikel kali ini saya akan membahas tentang perbedaan antaraÂ property CSS overflow dan clear dalam kontek multiple kolom atau biasa disebut pembagian kolom dalam HTML dan CSS. Kenapa saya bilang dalam kontek multiple kolom karena property CSS overflow dan clear selalu dipakai dalam pembagian kolom. Pada materi pembagian kolom ini, orang sering mengalami kesulitan bagaimana cara membagi kolom tampilan website. Apalagi untuk orang awam pasti sangat kesulitan.Â

Fungsi property CSS3 overflow dan clear ini bisa di bilang sama yang membedakan dari keduanya ini hanya cara penerapannya saja. Jika overflow disisipkan pada elemen pembungkus atau elemen terluar dari pembagian kolom sedangkan clear digunakan pada bagian target element html yang mengalami perubahan setelah dilakukan pembagian kolom. Â Untuk lebih jelasnya saya akan berikan contohnya di bawah ini.

Oke di bawah saya akan membuat element HTML class kotak dimana nantinya akan ada pembagian kolom di dalam kelas box tersebut.

<!DOCTYPE html>
<html>
<head>
	<title> Perbedaan Property CSS Overflow dan Clear </title>

	<style type="text/css">

		body {
			background: red;
		}
		.wrapper {
			width:700px;
			margin: auto;
			background:white;
			padding:20px;
		}

	

		.kotak1 {
			width:300px;
			float:left;
			background:green;
			padding: 20px;
		}

		.kotak2 {
			width:300px;
			float:right;
			background:green;
			padding: 20px;
		}

		.box {
			background:blue;
			color:white;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="kotak">
		    <div class="kotak1">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                     </div>
		     <div class="kotak2">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
		</div>
		<div class="box">Hallo...!!! Nama saya Feri Mispandi. saya dari dumetschool.com </div>
          </div>
</body>
</html>

Dari HTML di atas saya mempunyai elemen HTML kelas kotak dan kelas box dimana di dalam kelas kotak terdapat pembagian kolom left dan right yaitu pada kelas kotak1 dan kelas kotak2. karena sifat pembagian kolom menyisakan ruang kosong maka secara tidak langsung elemen bagian kelas box akan naik ke atas lihat contoh pada gambar di bawah. Eleman kelas box saya kasih style berwarna biru, dari situ kelihatan bahwa kelas box naik sampai ke kelas kotak.

Dari contoh gambar di atas kita dapat melihat perbedaanÂ property CSS overflow dan clear, Seperti yang saya bilang bahwa overflow diberikan pada elemen terluar atau Â pembungkus, disini elemen pembungkus dari kedua kolom tersebut adalah kelas kotak. Ketika kelas kotak saya kasih style ;

maka kelas box akan turun normal kembali, Sedangkan untuk properti CSS clear di sini saya berikan pada kelas box kenapa, karena kelas box yang bermasalah. ketika kelas box saya Â kasih style

maka kelas box juga akan normal kembali.

Jadi dari situ sudah dapat kita lihat bahwa clear dan overflow cuman beda peletakannya.Â Jika overflow disisipkan pada elemen pembungkus atau elemen terluar dari pembagian kolom sedangkan clear digunakan pada bagian target element html yang mengalami perubahan setelah dilakukan pembagian kolom.

Oke semoga bermanfaat.

Perbedaan Property CSS Overflow dan Clear

Kategori