float 속성
- 웹 문서의 요소를 떠 있게 하는 속성
- 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성
- 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미
- 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성
float 속성의 값
- right : 오른쪽부터 차례로 왼쪽 방향으로 떠 있게 함
- left : 왼쪽부터 차례로 오른쪽 방향으로 떠 있게 함
- both : 양쪽 어느 쪽으로도 떠 있지 않게 함
==> 해제하는 값
- float 속성을 사용한 후에는 반드시 해제(clear: both;)를 해주어야 함 (※ float 사용 시 다른 영역도 영향이 감!)
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#first ul li {
line-height: 200%;
}
#second ul li {
line-height: 2;
list-style: square;
}
#thrid ul li {
line-height: 2;
list-style: circle;
}
#first {
float: left;
}
#second {
float: left;
margin-left: 150px;
}
#third {
float: left;
margin-left: 150px;
}
.foot {
clear: both;
}
</style>
</head>
<body>
<div id="first">
<h2>회사소개</h2>
<ul>
<li>대표인사말</li>
<li>조직도</li>
<li>비전</li>
<li>오시는길</li>
</ul>
</div>
<div id="second">
<h2>사업영역</h2>
<ul>
<li>포털사이트</li>
<li>시스템통합</li>
<li>마케팅</li>
<li>웹디자인</li>
</ul>
</div>
<div id="third">
<h2>고객센터</h2>
<ul>
<li>다운로드</li>
<li>질의/응답</li>
<li>자유게시판</li>
<li>1:1 게시판</li>
</ul>
</div>
<address class="foot">
서울시 구로구 시흥대로 163길 33, 주호타워 2층, 3층
</address>
</body>
</html>=============================실행=============================
스타일 적용 전
스타일 적용 후
