CSS Clear
Buat html seperti dibawah ini
<body>
<div class="container">
<img src="csslogo.png" alt="logo">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi obcaecati assumenda accusantium
ullam quo nobis aliquid rem nostrum quae magni nam odit, voluptate saepe sunt veniam omnis distinctio vel,
</p>
<div class="clear-f"></div>
</div>
</body>
Beri style seperti dibawah.
.container{
width: 500px;
border: 5px solid black;
}
img{
width: 140px;
float: left;
margin: 20px;
}
.clear-f{
clear: left;
}
Seperti inilah jika kita memberi property Clear. Perlu diperhatikan bahwa menggunakan element div clear juga harus tepat penggunaannya. Jika kalian ingin tulisan tetap ada disamping gambar maka, element div harus dibawah element p.
Hasil ini jika kalian menggunakan element div berada diantara element img dan p, satu yang perlu dingat jika menggunakan clear harus mengikuti float right atau left. Jika float left makan clear harus left begitu juga dengan right
Buat html seperti dibawah.
<body>
<div class="container">
<div class="box1">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box2">6</div>
<div class="clear-f"></div>
<p>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Dolor sit deleniti eum
inventore accusamus, soluta iure nostrum
enim vitae alias dolore ipsa itaque, simil
ique hic nisi porro eligendi doloremque!
Voluptatum.</p>
</div>
</body>
Kita buat agar box pertama dan akhir berada dikanan lalu teks berada di tengah
.container{
width: 500px;
border: 5px solid black;
margin: auto;
padding: 5px;
}
.box{
width: 100px;
height: 100px;
float: left;
background-color: red;
margin: 10px;
text-align: center;
line-height: 100px;
}
.box1{
background-color: blue;
width: 100px;
height: 100px;
margin: 10px;
float: right;
text-align: center;
line-height: 100px;
}
.box2{
background-color: green;
width: 100px;
height: 100px;
margin: 10px;
float: right;
text-align: center;
line-height: 100px;
}
.clear-f{
clear: left;
}
Maka seperti inilah hasilnya.
Buat 2 box kanan dan kiri
<body>
<div class="container">
<div class="kiri"></div>
<p>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Pariatur, corporis vol
uptatem eligendi a asperiores dicta cum v
elit, atque officia rerum earum eos maiore
s fugit modi error vitae in expedita harum.</p>
<div class="kanan"></div>
<div class="clear-f"></div>
</div>
</body>
Jika kita menggunakan property clear dengan value both
.container{
width: 600px;
border: 3px solid black;
margin: auto;
padding: 10px;
}
.kiri {
width: 250px;
height: 250px;
background-color: red;
float: left;
}
.kanan {
width: 250px;
height: 250px;
background-color: green;
float: right;
}
.clear-f{
clear: both;
}
Hasil yang akan terlihat maka berada ditengah antara box merah dan hijau
Komentar
Posting Komentar