Contents
float 속성
float란?
아무런 설정을 하지 않으면 다음 원소는 이전 원소의 아래에 위치하게 된다. 하지만 float라는 속성을 주게되면 다음 원소가 float속성을 가진 원소의 주변을 왼쪽 또는 오른쪽으로 감싸도록 만들 수 있다. 이때, 주의할 점은 감싸는 원소와 감싸지는 원소는 HTML상에서 같은 레벨에 있어야 한다.
이런 float는 이미지를 글로 감쌀 때는 유용하게 사용될 수 있으나, 구역들을 유동적으로 배치하고 나열할 때는 매우 복잡해 질 수 있어 layout을 배치할 때는 flexbox 같은 다른 속성들이 주로 사용된다.
관련 HTML & CSS 예시 코드
// HTML
<body>
<img class="cat" src="cat.jpeg" alt="cat in a box" />
<p class="first-paragraph">The cat (Felis catus), commonly referred to as the domestic cat or house cat, is a small
domesticated carnivorous mammal. It is the only domesticated species of the family Felidae. Recent advances in
archaeology and genetics have shown that the domestication of the cat occurred in the Near East around 7500 BC. It
is commonly kept as a house pet and farm cat, but also ranges freely as a feral cat avoiding human contact. Valued
by humans for companionship and its ability to kill vermin, the cat's retractable claws are adapted to killing
small
prey like mice and rats. It has a strong, flexible body, quick reflexes, and sharp teeth, and its night vision and
sense of smell are well developed. It is a social species, but a solitary hunter and a crepuscular predator. Cat
communication includes vocalizations like meowing, purring, trilling, hissing, growling, and grunting as well as
cat
body language. It can hear sounds too faint or too high in frequency for human ears, such as those made by small
mammals. It secretes and perceives pheromones.</p>
<img class="dog" src="dog.jpeg" alt="dogs in a box" />
<p class="second-paragraph">The dog (Canis familiaris or Canis lupus familiaris) is a domesticated descendant of the
wolf. Also called the domestic dog, it was domesticated from an extinct population of Pleistocene wolves over
14,000 years ago. The dog was the first species to be domesticated by humans. Experts estimate that
hunter-gatherers domesticated dogs more than 15,000 years ago, which was before the development of agriculture.
Due to their long association with humans, dogs have expanded to a large number of domestic individuals and gained
the ability to thrive on a starch-rich diet that would be inadequate for other canids.[4]</p>
<footer>THIS IS FOOTER</footer>
</body>//CSS
.cat {
float: left;
}
.dog {
float: right;
}
footer {
background-color: lightblue;
clear: both; // float left와 right를 무시하게 만듦
}결과
cat 이미지는 “float: letf”라는 속성을, dog 이미지는 “float: right”라는 속성을 주어, cat 다음 원소들은 모두 왼쪽 또는 아래에 위치하고 dog 다름 원소들은 모두 왼쪽 또는 아래에 위치하도록 만들어진다. 이때, 마지막 원소인 footer는 clear라는 속성을 이용해 float효과를 무시하고 있다.
