15 float와 clear
float
float 속성은 HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들어준다.
현재는 웹 페이지 레이아웃을 작성할 때 더 많이 사용된다.
float의 특징
1. float를 적용받은 요소의 다음 요소들이 끌어올려진다.
2. float를 적용받은 요소의 방향을 설정한다. (left,right)
[예시]
float : left
<style>
#left-ruffy{
float: left;
}
p{
font-size: 24px;
line-height: 40px;
}
</style>
float : right
<style>
#left-ruffy{
float: right;
}
p{
font-size: 24px;
line-height: 40px;
}
</style>
결과를 보면, 적용받은 요소가 방향 설정되고 다음 요소인 p 문단이 끌어올려진것을 확인할 수 있다.
3. 컨텐츠 크기 만큼만 영역을 설정한다. (블록의 성격을 가짐)
4. float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다. (다른 요소들 보다 떠있음)
[예시]
width를 설정하지 않으면 부모 요소의 가로폭을 가득채운다.
여기에 float 값을 설정하면, content의 크기 만큼 영역을 설정한다.
<style>
div{height: 50px;}
#div1{
background-color: deeppink;
float: left;
}
#div2{background-color: deepskyblue;}
</style>
이미지로 보기엔 div1의 옆에 div2가 붙은거 같아 보이지만 사실 div1은 div2위에 떠있는 것이다.
float 요소는 다음요소들이 끌어 올려지는데 그러길 원치않는다면 어떻게 해야할까?
바로 clear 를 사용하면 된다 ( •̀ ω •́ )✧
clear
clear 속성은 float 속성이 적용된 이후 나타는 요소들의 동작을 조절한다.
float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 쉽지않기때문에
clear 속성을 사용하여 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정한다.
| clear 속성값 | 설명 |
| both | 양쪽의 float를 무효 |
| left | 왼쪽의 float를 무효 |
| right | 오른쪽의 float를 무효 |
[문법]
선택자{clear: 속성값;}
[예시]
<style>
body{margin: 20px 30px; max-width: 800px;}
p{
padding: 10px;
text-align: justify;
font-size: 15px;
}
#p1{
float: left;
width: 38%;
background-color: rgb(255, 195, 195);
margin-bottom: 20px;
}
#p2{
float: right;
width: 54%;
background-color: rgb(218, 246, 255);
}
#p3{
background-color: rgb(241, 255, 219);
}
</style>
clear 적용 전
clear : both 적용 후
#p3{
clear: both;
background-color: rgb(241, 255, 219);
}
float와 clear를 사용하여 아래와 같은 이미지를 만들어보자 (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
구성
CSS
#container{
width: 1000px;
margin: 0 auto;
}
div{
padding: 20px;
border: 1px solid gray;
}
#header{
margin-bottom: 20px;
}
#contents{
width: 700px;
float: left;
}
#sidebar{
width: 200px;
float: right;
margin-bottom: 20px;
background-color: gold;
}
#footer{
clear: both;
}
HTML
<link rel="stylesheet" href="./CSS/layout1.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Libero autem aliquam excepturi sequi deleniti dolorum optio pariatur,
illo voluptatum quibusdam quod qui earum at, ipsam eaque natus rem.
Voluptate, perferendis.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Nisi, exercitationem natus?
Reprehenderit est voluptatem sed exercitationem laudantium totam
laborum consequatur enim vitae! Tempore quasi,
enim ducimus autem magni ratione ad.
</p>
</div>
<div id="sidebar">
<h2>사이드바</h2>
<ul>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem saepe, facere voluptates in vel consectetur est inventore sequi iusto.
Recusandae, enim vitae. Neque nemo adipisci explicabo dicta,
temporibus odit eius.
</li>
</ul>
</div>
<div id="footer">
<h2>푸터</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit
. Neque, tempora voluptates laborum magni iure sit at optio
dolorem nostrum praesentium, sapiente laudantium est,
sint quo qui deserunt doloremque doloribus quod.
</div>
</div>
</body>
결과
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>