CSS'de Float Kullanımı

CSS'de float özelliği, bir etiketin nasıl yaslanması ve konumlanması gerektiğini belirtir. float özelliği, içeriğin konumlandırılması ve biçimlendirilmesi için kullanılır, örneğin bir resmin bir kapsayıcıdaki metnin soluna kaymasına izin verir.

Float özelliği aşağıdaki değerlerden birine sahip olabilir:

  • left- Etiket, kapsayıcısının soluna yaslanır.
  • right- Etiket, kapsayıcısının sağınay yaslanır.
  • none - Etiket bir tarafa yaslanmaz. Varsayılan değeridir.
  • inherit- Etiket, üst etiketin float değerini devralır
img {
  float: right;
}

float özelliği ile içerik kutularını yan yana yaslamak kolaydır:

Float Örneği:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style media="screen">
	.containter {
		width: 100%;
		height: auto;
		margin: auto;
	}
	.box {
		float: left;
		width: 15%;
		padding: 50px;
	}
	</style>
</head>
<body>
	<div class="containter">
		<div class="box" style="background:black;"></div>
		<div class="box" style="background:grey;"></div>
		<div class="box" style="background:blue;"></div>
		<div class="box" style="background:pink;"></div>
	</div>
</body>
</html>

Sorular (0)