[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

애니효과: 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>

 

결과 보기

 

<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>

 

결과 보기