Fungsi Css Float

Tanggal : 08 Aug 2018, Category : CSS, Create By : admin

Dalam script css banyak sekali propertis di dalamnya, seperi backgroud, color, dll, tapi sekarang kita akan membahas tentang propertis css Float, Float dalam bahasa Indonesia artinya adalah mengapung jadi Fungsi Float dalam css sebagai penentu bagaimana sebuah element mengapung dengan element berikutnya dengan posisi di sebelah kanan atau kiri element utama.

Biasanya penggunaan properti Float di gunakan untuk memposisikan gambar dan text atau div dan div lainya sehingga bisa berdampingan atau bersebelahan, tidak hanya gambar dan div  Float  juga bisa digunakan untuk tag html lainya.

Value Float

Float : Left

Value ini akan membuat Element mengapung di sebelah kiri halaman atau Tag HTML

Contoh :

Sebelum menggunakan Css Float :

 <!DOCTYPE html>
 <html>
  <head>
    <title>Fungsi Css Float</title>
    </head>
    <body>
      <img src="logo.jpg" width="100px">
      <p>Belajar Fungsi Css Float</p>
    </body>
 </html>

Hasil : 

Jika tidak menggunakan Css Float maka element akan poisisi atas dan bawah tertapi jika menggunakan Float maka,

Menggunakan Propertis Css Float

 <!DOCTYPE html>
 <html>
  <head>
    <title>Fungsi Css Float</title>
    </head>
    <body>
      <img src="logo.jpg" width="100px" style="float:left">
      <p>Belajar Fungsi Css Float</p>
    </body>
 </html>

Hasil :

 Jika menggunakan propertis Css Float maka gambar dan text akan berdampingan.

Float : Right

Value ini akan membuat Element mengapung di sebelah Kanan halaman atau Tag HTML

Gambar diatas element gambar mengapung di sebelah kanan Tag HTML Body, agar tidak terlalu kekanan anda bisa menambah Buka Tutup tag div. 

Contoh :

<!DOCTYPE html>
 <html>
  <head>
    <title>Fungsi Css Float</title>
    </head>
    <body>
      <div style="width:30%">
        <img src="logo.jpg" width="100px" style="float:right">
        <p>Belajar Fungsi Css Float</p>
      </div>
 </body>
</html>

Float : None

Value ini adalah default dari Float, Element tidak akan mengapung atau tidak boleh mengapung.

Hasil :

Float : Inherit

Value ini akan membuat element mengikuti value element sebelumya.

 

 

Selamat Mencoba

Keyword:
  • fungsi css float
  • css float
  • float css
  • value float css
  • propertis css float

Artikel Lain

Cara Menampilkan Dialog Konfirmasi Hapus Data Di Url Ahref Javascript

Date : 08 Sep 2018, Category : JavaScript, Create By : admin

Konfimasi adalah hal yang penting dalam pembuatan aplikasi, karena dengan konfirmasi pengguna bisa menastikan apakan langkah yang di ambil akan di lanjutkan di kerjakan atau tidak, seperti contohnya dalam menghapys .....

Menyisipkan Background Gambar Dengan Css

Date : 23 Aug 2018, Category : CSS, Create By : admin

Selamat datang kembali di website gudang ilmu aplikasi tempatnya anda menambah ilmu, kali ini kami akan membahas mengenai menyisipkan atau menambah background gambar dengan css di halaman website anda. oke .....

Membuat Format Rupiah Di Javascript

Date : 17 Aug 2018, Category : JavaScript, Create By : admin

Selamat datang di gudang ilmu aplikasi, sebelumnya kita telah membahas cara membuat format rupiah di PHP, kali ini kami akan membahas bagainama cara membuat format rupiah pada javascript. jika di .....