float란?
HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용하는것!
float 특징
- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
- float를 적용받은 요소의 방향을 결정(left,right)
- 컨텐츠 크기 만큼만 영역을 설정(블록)
- float를 적용받은 요소는 다른 요소보다 위쪽에 위치(배경보다 위)
바로 코드를 보며 이해해보자
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float1</title>
<style>
img{
float:left;
margin-right: 20px;
}
</style>
</head>
<body>
<h2>float1</h2>
<img src="bus.png" alt="버스">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut est reiciendis, voluptatibus modi tempora vitae earum repudiandae autem inventore neque esse ducimus sequi quam veritatis reprehenderit soluta explicabo repellendus voluptatem.
</body>
</html>
결과물
HTML 코드 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float2</title>
<style>
#box1{
padding: 20px;
background-color: gold;
float: left;
margin-right: 20px;
}
#box2{
padding: 20px;
background-color: deeppink;
margin-right: 20px;
float: left;
}
#box3{
padding: 20px;
background-color: deepskyblue;
margin-right: 0;
float: left;
}
#box4{
padding: 20px;
background-color: greenyellow;
margin-right: 0;
float: right;
}
</style>
</head>
<body>
<h2>float2</h2>
<div id="box1">박스-1</div>
<div id="box2">박스-2</div>
<div id="box3">박스-3</div>
<div id="box4">박스-4</div>
</body>
</html>
결과물
float을 사용하게 되면 예상치 못하게 출력이 되는 경우가 있다.
밑에 요소가 중간에 끼거나 예상치 못하게 올라오는 경우가 생기는데 이는 다음글 clear에 해결방법을 정리하겠다.
https://coding-diary100.tistory.com/63
CSS_clear
clear란? float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해주는 것! ✔ -float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬 -clear 속성을 이용하여 float
coding-diary100.tistory.com
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_다단 레이아웃 (0) | 2023.03.30 |
|---|---|
| CSS_clear (0) | 2023.03.30 |
| CSS_z-index (0) | 2023.03.30 |
| CSS_Position (0) | 2023.03.30 |
| CSS_디스플레이 (0) | 2023.03.30 |
