[css] clear(none, both, left, right) 의 속성
[css] clear(none, both, left, right) 의 속성
이전에 float 속성에 대해서 배웠는데,
float 은 왼쪽, 오른쪽으로 해당 객체를 위치 시켜서 정렬하는 속석이었다.
float(none, left, right) 의 속성 보기
그렇다면 float 속성을 적용한 해당 객체의 다음에 오는 객체가 붙지 않게 하려면 어떻게 해야 할까?
바로 clear 속성을 사용 하면 된다.
clear 속성 사용법
none (기본값) : clear 속성을 설정하지 않은 것과 같다.
left : 왼쪽으로 붙는 float 정렬을 취소 한다.
right: 오른쪽으로 붙는 float 정렬을 취소 한다.
both : 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다.
기본 html 소스
실행 결과는 다음과 같다.
이제부터 위의 html 문서에서 clear 속성을 적용해 보자.
1. float: left; clear: left
div#a {
background: #52D4FF;
float: left;
}
p#text {
clear: left;
}
div(block element) a 영역은 float: left 상태인데 clear: left 속성을 주면 글자가 아래로 내려가게 된다.
2. float: right; clear: right
div#a {
background: #52D4FF;
float: right;
}
p#text {
clear: right;
}
div(block element) a 영역은 float: right 상태인데 clear: right 속성을 주면 글자가 아래로 내려가게 된다.
3. clear: both
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
background: #52D4FF;
float: left;
}
div#b {
background: #FF63EA;
float: right;
}
p#text {
clear: both;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b영역
</div>
<p id="text">a, b 영역이 있습니다.</p>
</body>
</html>
div(block element) a 영역은 float: left, b 영역은 float: right 상태인데 clear: both 속성을 주면,
clear를 설정한 객체는 모드 글자가 아래로 내려가게 된다.
'develop > css' 카테고리의 다른 글
| [css] overflow (visible, hidden, scroll, auto) 속성 (0) | 2017.10.23 |
|---|---|
| [css] 여백 (margin, padding) 속성 (0) | 2017.09.26 |
| [css] position (static, relative, absolute, fixed) 의 속성 (1) | 2017.09.25 |
| [css] float(none, left, right) 의 속성 (0) | 2017.09.24 |
| [css] display (none, inline, inline-block, block) 와 visibility (visible, hidden, collapse) 의 차이 (0) | 2017.09.23 |