clear Property

Home > Document > CSS > Positioning > clear

clear Property

clear Property는 앞 페이지의 float와 연관된 Property로서 float Property로 위치를 지정한 그림이나 Box 주변의 text들이 그림이나 Box 주변으로 흐르게 하거나, 흐름을 멈추고 그림이나 Box 아래로 내려와서 줄을 바꿀 것인지를 지정하는 Property 입니다.

[표 보는 방법]

clear Property
Value	none \| left \| right \| both \| Inherit
Initial	none
Applies to	block-level elements
Inherited	no
Percentages	N/A
Media	Visual
HTML Syntax	{ clear : sClear }
Scripting	object.style.clear [ = sClear ]

CSS Scripting

onClick="this.style.clear='both';"

clear Property 의 사용값

none
그림이나 Box 아래로 줄을 바꾸지 않고 주변으로 흐릅니다.

left
text 가 그림이나 Box 오른쪽으로 흐르지 않고 그림이나 Box 아래로 줄바꿈을 합니다.

right
text 가 그림이나 Box 왼쪽으로 흐르지 않고 그림이나 Box 아래로 줄바꿈을 합니다.

both
text 가 그림이나 Box 사이로 흐르지 않고 그림이나 Box 아래로 줄바꿈을 합니다.

float Property - Block Box의 경우

float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float

both

left

right

none

소스 보기

입력

<HTML>
    <HEAD>
        <TITLE>clear Property</TITLE>
    <STYLE type="text/css">
    <!-- 
    .td_button{
    height:18px;
    background-color:royalblue;
    border:1px solid #808080;
    cursor:hand;
    font-size:11px;
    color:#EFEFEF;
    text-align:center;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY>
      <DIV style="width:100px; height:100px; background:gold; float:left;"></DIV>
      <DIV style="width:100px; height:100px; background:tomato; float:right"></DIV>
      float float float float float float float float float float float float float float float float 
      float float float float float float float float float float float float float float float float 
      float float float float float float float float float float float float float float float float 
      <SPAN id="span1" style="font-weight:bold;">
      float float float float float float float float float float float float float float float float 
      float float float float float float float float float float float float float float float float 
      float float float float float float float float float float float float float float float float 
      float float float float float float float float float float float float float float float float 
      float float float float float float float float float float float float float float float float 
      </SPAN>

      <table cellspacing="2" width="100%" style="table-layout:fixed; border:1px solid #333333;">
        <tr>
          <td class="td_button" onclick="span1.style.clear='both';">
          both
          </td>
          <td class="td_button" onclick="span1.style.clear='left';">
          left
          </td>
          <td class="td_button" onclick="span1.style.clear='right';">
          right
          </td>
          <td class="td_button" onclick="span1.style.clear='none';">
          none
          </td>
        </tr>
      </table>
    </BODY>
</HTML>

Top

Back

New

검색