- 블럭레벨을 평행정렬될 수 있도록 함. - 손을 잡는다 - 끊어내는건 clear - float를 적용받은 블럭레벨은 width를 컨텐츠의 크기만큼 바꿔버림.
인라인레벨에 한해서 태그들 enter공간에 따라 여백공간이 생성된다.
- clear: left - 해당 요소에 바로 인접한 좌측에 플로팅 요소가 허용되지 않음
- clear: right- 해당 요소에 바로 인접한 우측에 플로팅 요소가 허용되지 않음
- clear: both - 해당 요소에 바로 인접한 양쪽에 플로팅 요소가 허용되지 않음
- clear: inherit - 상위 요소(부모요소)의 클리어 값을 상속받음.
float
<!DOCTYPE html>
<html>
<head>
<title>float 속성</title>
<style>
/* clear속성값 :
left - 해당 요소에 바로 인접한 좌측에 플로팅 요소가 허용되지 않음
right- 해당 요소에 바로 인접한 우측에 플로팅 요소가 허용되지 않음
both - 해당 요소에 바로 인접한 양쪽에 플로팅 요소가 허용되지 않음
inherit - 상위 요소(부모요소)의 클리어 값을 상속받음. */
.divClass {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
p {
clear: both;
}
</style>
</head>
<body>
<h2>Float 사용의 다른 방법</h2>
<div style="width: 300px; margin: 0 auto; border: 2px solid #000">
<div class="div1 divClass">Div 1</div>
<div class="div2 divClass">Div 2</div>
</div>
<div class="div2 divClass" style="clear: left">Div 2</div>
<div class="div2 divClass">Div 2</div>
<div class="div3 divClass">Div 3</div>
<p>Float 사용의 다른 방법</p>
<p>Float 사용의 다른 방법</p>
<div class="div1 divClass">Div 1</div>
<div class="div2 divClass">Div 2</div>
<div class="div3 divClass">Div 3</div>
</body>
</html>
Overflow
overflow | overflow-x | overflow-y 속성값
- visible : 오버플로가 잘리지 않고 모두 표현. 기본값(디폴트)
- hidden : 오버플로가 잘리고 나머지 내용은 보이지 않음.
- scroll : 오버플로가 잘리지만 나머지 내용을 보려면 스크롤 막대가 추가됨.
- auto : 오버플로에 대해 자동으로 설정처리.
- 만약 오버플로가 잘린 경우는 스크롤을 추가해야만 한다. 자동추가 안 됨.
overflow, clear, float
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style>
/* overflow | overflow-x | overflow-y 속성값
visible : 오버플로가 잘리지 않고 모두 표현. 기본값(디폴트)
hidden : 오버플로가 잘리고 나머지 내용은 보이지 않음.
scroll : 오버플로가 잘리지만 나머지 내용을 보려면 스크롤 막대가 추가됨.
auto : 오버플로에 대해 자동으로 설정처리.
만약 오버플로가 잘린 경우는 스크롤을 추가해야만 한다. 자동추가 안 됨. */
div {border: 3px solid #4CAF50; padding: 5px;}
.img1, .img2 {float:right;}
.clearfix {overflow:v; height: 100px;}
img{width:170px; height:170px;}
</style>
</head>
<body>
<h2>Clearfix</h2>
<p>In this example, the image is taller than the element containing it,
and it is floated, so it overflows outside of its container:
</p>
<div>
<!-- <img class="img1" src="../../img/pineapple.jpg" alt="pineapple"> -->
<img class="img1" src="https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/201901/08/35b501da-eacc-4f6d-9df2-38c9a55f8d36.jpg" alt="pineapple">
Loram ipsum dolor sit amet, consectetur adipscing elt. Phasellus imperidet,
nulla et dictum interum...
</div>
<!-- <div class="clearfix" style="clear:right">
<img class="img2" src="../img/pineapple.jpg" alt="pineapple">
텍스트의 수가 적어서 이미지의 높이를 벗어나지 못하면,
그 부분을 감싸고 있는 div박스의 영역이 이미지를 감싸지 못하고,
그 안으로 들어가게 되는 현상이 발생된다.
이 부분을 해결하기 위해서 넘치는 부분(overflow)의 값을
어떻게 처리할 지 설정해주면 된다.
Loram ipsum dolor sit amet, consectetur adipscing elt. Phasellus imperidet,
nulla et dictum interum...
</div> -->
<div class="clearfix" style="clear:right">
<img class="img2" src="https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/201901/08/35b501da-eacc-4f6d-9df2-38c9a55f8d36.jpg" alt="pineapple">
Loram ipsum dolor sit amet, consectetur adipscing elt. Phasellus imperidet,
nulla et dictum interum...
</div>
</body>
</html>
