• 회원가입
  • 로그인
  • 구글아이디로 로그인

[position] CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)

목차
  1. clear 예제 - float 해제 후, 줄바꿈
  2. clear 정의
  3. clear 구문
  4. clear 예제1 - P2는 P1 밑줄에, P3는 P2 옆에 위치
  5. clear 예제2 - none, left, right, both 속성값 효과 비교
  6. clear 예제3 - 예제2와 비교

 

clear 예제 - float 해제 후, 줄바꿈 

 

<style>

img {float: left;}

p.clear {clear: both;}

</style>


<img src="https://source.unsplash.com/random" width="100" height="132">

<p>홈짱닷컴 Homzzang.com</p>

<p class="clear">홈페이지 제작관리 유지보수 관리매뉴얼 제공 + 코딩교육</p>


결과보기

 

clear 정의

 
박스요소 띄울 위치 지정 속성인 float 기능 해제하고 줄 바꿈 여부 결정.
즉, 특정 요소의 좌우에 어떤 요소가 올 수 없도록 선택 지정하는 역할 함.
 


1.
기본값: none
상속여부: X
애니효과: 
CSS버전: CSS1
JS구문: object.style.clear="both"
 
2.
주요 최신 브라우저 모두 지원.
 

clear 구문

 
selector{clear: none|left|right|both|initial|inherit;}
 

[속성값]

none
float 속성을 해제하지 않음 (기본값)
 
left
왼쪽에 float 된 요소의 아랫줄에 위치 시킴.
 
right 
오른쪽에 float 된 요소의 아랫줄에 위치 시킴.
 
both
양쪽에 float 된 요소 모두의 아랫줄 위치 시킴. 
※ float 된 속성 줄바꿈할 때 both 속성값 자주 사용.
※ both 대신 all 사용해도 효과 나타남.
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모요소 속성값 상속.
 
 

clear 예제1 - P2는 P1 밑줄에, P3는 P2 옆에 위치

 
<style>
div {width:100%; height:100px; border:1px solid red;}
p.p1 {float:left; widh:100px; padding-left:30px;}
p.p2 {float:left; widh:100px; padding-left:30px; clear:both;}
p.p3 {float:left; widh:100px; padding-left:30px;}
</style>

<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
<p class=p3>HTML CSS 알기 쉽게 강의</p>
</div>

clear 예제2 - none, left, right, both 속성값 효과 비교

 
<style>
.box1, .box2, .box3, .box4 {clear:both; margin-bottom:70px; width:720px; border:1px solid silver; overflow:auto;}
.redline {border-top:solid red;}

.box1 > .left,.box1 > .right,.box2 > .left,.box2 > .right,
.box3 > .left,.box3 > .right,.box4 > .left,.box4 > .right 
{background-color:#f8e1eb;width:100px; text-align:center;}
.left {float:left;}
.right {float:right}
</style>
 
 
<div class="box1"> 
    <div class='left' style="height:20px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    clear:none - 홈짱닷컴 글씨 아래 줄에 밑줄
    <br clear="none">
    <div class="redline"></div>
</div>

<div class="box2"> 
    <div class='left' style="height:20px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    clear:left - 왼쪽 float 된 1번 아래 줄에 위치
    <br clear="left">
    <div class="redline"></div>
</div>

<div class="box3"> 
    <div class='left' style="height:20px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    clear:right - 오른쪽쪽 float 된 2번 아래 줄에 위치
    <br clear="right">
    <div class="redline"></div>
</div>

<div class="box4"> 
    <div class='left' style="height:60px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    clear:both - 양쪽 모두의 아래 줄에 위치
    <br clear="both">
    <div class="redline"></div>
</div>
 
 

clear 예제3 - 예제2와 비교

<div style="border-top:solid red;"></div>는 1과 2와 동위의 줄에 위치하나,
홈짱닷컴 줄은 clear 속성에 의해 한칸 아래 위치
 
<style>
.box1, .box2, .box3, .box4 {clear:both; margin-bottom:70px; width:720px; border:1px solid silver; overflow:auto;}
.redline {border-top:solid red;}

.box1 > .left,.box1 > .right,.box2 > .left,.box2 > .right,
.box3 > .left,.box3 > .right,.box4 > .left,.box4 > .right 
{background-color:#f8e1eb;width:100px; text-align:center;}
.left {float:left;}
.right {float:right}
.text {width:400px;}
</style>
 
<div class="box1"> 
    <div class='left' style="height:20px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    <div class='text' style="float:right; clear:none;">
         홈짱닷컴 (homzzang.com) clear:none - 빨간 줄의 아래 줄에 위치
    </div>
    <div class="redline"></div>
</div>

<div class="box2"> 
    <div class='left' style="height:20px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    <div class='text' style="float:right; clear:left;">
         홈짱닷컴 (homzzang.com) clear:left - 왼쪽 1번의 아래 줄에 위치
    </div>
    <div class="redline"></div>
</div>

<div class="box3"> 
    <div class='left' style="height:20px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    <div class='text' style="float:right; clear:right;">
         홈짱닷컴 (homzzang.com) clear:right - 우측 2번 아래 줄에 위치
    </div>
    <div class="redline"></div>
</div>

<div class="box4"> 
    <div class='left' style="height:60px;">왼쪽</div>
    <div class='right' style="height:40px;">오른쪽</div>
    <div class='text' style="float:right; clear:both;">
         홈짱닷컴 (homzzang.com) clear:both - 양쪽의 아래 줄에 위치
    </div>
    <div class="redline"></div>
</div>
 
결과 보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
position CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로 = float속…
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
position CSS - overflow-x 속성 - 수평방향으로 넘치는 내용 처리 방법 지정 (= overflow-x속성…
position CSS - overflow-y 속성 - 수직방향으로 넘치는 내용 처리 방법 지정 (= overflow-y속성…
목록
찾아주셔서 감사합니다. Since 2012