728x90
반응형
세로로 나열되는 block 요소를 가로로 배치하고 싶을 때 사용
float한 박스 요소에 가로 사이즈를 지정해야만 적용된다
heading과 inline 요소는 가로 사이즈를 지정하지 않아도 레이아웃이 유지된다
속성값
- left : 요소를 왼쪽에 배치. 나머지는 그 주변을 흐르도록 함
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .float { float: left; width: 40px; margin: 10px; text-align: center; background-color: burlywood; } </style> </head> <body> <div class="float">보리건빵</div> <p>보리분말을 함유한 건강건빵으로 입안 가득히 퍼지는 구수한 맛을 느끼시며 드실 수 있는 건빵입니다. </p> </body> </html> 
-
- right : 요소를 오른쪽에 배치. 나머지는 그 주변을 흐르도록
-
body { text-align: justify; } .float { float: right; width: 40px; margin: 10px; text-align: center; background-color: burlywood; }- float된 요소와 닿아 있는 면의 텍스트는, 주로 가지런히 정렬하여, 가독성 높임
-
- none : float 취소하기
float 여러 개
모든 li를 float하여 가로로 나열
실제로 display의 flex 속성 전에 float를 이용하였다고 한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
float: left;
list-style-type: none;
width: 150px;
text-align: justify;
margin: 0 10px;
}
h3 {
padding: 5px;
margin: 10px;
text-align: center;
background-color: burlywood;
}
li+li h3 {
background-color: brown;
color: white;
}
li+li+li h3 {
background-color: silver;
}
</style>
</head>
<body>
<ul>
<li>
<h3>보리건빵</h3>
<p>보리 분말을 함유한 건강 건빵으로 입안 가득히 퍼지는 구수한 맛을 느끼시며
드실 수 있는 건빵입니다.</p>
</li>
<li>
<h3>튀긴건빵</h3>
<p>식용유로 높은 온도에서 빠르게 튀겨낸 건빵으로
고소한 맛이 일품이며 지칠 때 한 개씩 넣기 좋은 건빵입니다.</p>
</li>
<li>
<h3>두유</h3>
<p>그 어떤 첨가물 없이 100% 콩으로 직접 짜내어 생산한 담백한 두유입니다.</p>
</li>
</ul>
</body>
</html>
clear
float 속성은 빈 자리를 꼭 채워주려고 함.
3번째 li에 clear를 적용하지 않으면 위로 올라와서 겹침
li {
list-style-type: none;
text-align: justify;
margin: 0 10px;
}
li:nth-child(1) {
float: left;
width: 50px;
}
li:nth-child(2) {
float: right;
width: 50px;
}
li:nth-child(3) {}
- clear : both;
-
li { list-style-type: none; text-align: justify; margin: 0 10px; } li:nth-child(1) { float: left; width: 50px; } li:nth-child(2) { float: right; width: 50px; } li:nth-child(3) { clear: both; }
-
- clear : left;
-
왼쪽의 float된 요소에 맞추어 줄 세워진다. right 속성의 경우 오른쪽에 float된 속성에 맞추어 줄이 세워지기에 현재 예제에선 오른쪽이 더 길기에 both와 똑같은 모습을 보인다.li:nth-child(3) { clear: left; }
-
float 해제 (clear 필수)
float를 해제하지 않으면
이후 요소들의 레이아웃이 무너지거나,
배경색, 테두리가 제대로 나타지 않습니다.
그래서 float 사용 시 해제는 필수 !!
1. 박스 안에 내용없는 가짜 블록 요소를 만들어 clear: both 지정
.clear:after {
content: "";
display: block;
clear: both;
}
<div class="bread clear">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.clear:after {
content: "";
display: block;
clear: both;
}
.bread {
padding: 30px;
background-color: silver;
}
h1 {
text-align: center;
margin-left: 30px;
}
li {
list-style-type: none;
text-align: justify;
width: 47%;
margin-right: 20px;
}
li:nth-child(1) {
float: left;
}
li:nth-child(2) {
float: right;
}
h3 {
padding: 5px;
text-align: center;
background-color: burlywood;
}
li+li h3 {
background-color: brown;
color: white;
}
</style>
</head>
<body>
<div class="bread clear">
<h1>건빵의 세계</h1>
<ul>
<li>
<h3>보리건빵</h3>
<p>보리 분말을 함유한 건강 건빵으로 입안 가득히 퍼지는 구수한 맛을 느끼시며 드실 수 있는 건빵입니다.</p>
</li>
<li>
<h3>튀긴건빵</h3>
<p>식용유로 높은 온도에서 빠르게 튀겨낸 건빵으로 고소한 맛이 일품이며 지칠 때 한 개씩 넣기 좋은 건빵입니다.</p>
</li>
</ul>
</div>
</body>
</html>
float 해제 (clear 필요X)
Case 1) float 요소를 감싸는 박스도 float되어 있을 때
=> 감싸는 박스의 float를 해제
Case 2) float 요소를 감싸는 박스가 있다면 (not float)
- 감싸는 박스에 overflow: auto; 적용
- 세로 스크롤바가 있다면 적용 불가능. width값 주어야 레이아웃 유지됨.
- 감싸는 박스에 height 부여
- 이 또한 세로 사이즈가 변한다면 사용 불가능
모바일 화면에서
보통 무조건 일렬 나열로, 100% width를 차지하므로
float나 position이 필요 없다
728x90
반응형
'Web > Frontend' 카테고리의 다른 글
| HTML Templating (0) | 2021.06.11 |
|---|---|
| Tab UI Component (0) | 2021.06.11 |
| Event Delegtion - 등록, 버블링, 멈추기 (0) | 2021.05.25 |
| 디렉토리 구성 방식 - JS&CSS (0) | 2021.05.24 |
| 웹 애니메이션 - requestAnimation, transition (0) | 2021.05.23 |