1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
|
---
title: clear
slug: Web/CSS/clear
tags:
- CSS
- CSS Positioning
- CSS Property
- Reference
translation_of: Web/CSS/clear
---
<div>{{CSSRef}}</div>
<p><strong><code>clear</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소가 선행 <a href="/ko/docs/Web/CSS/float">부동</a>(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. <code>clear</code> 속성은 부동 및 비부동 요소 모두에 적용됩니다.</p>
<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
<p>비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로까지 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">보더 경계</a>를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="margin collapsing">마진 상쇄</a>가 일어나지 않도록 합니다.</p>
<p>부동 요소에 적용되는 경우, 모든 관련 부동체의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a>를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.</p>
<p>해제(cleared)와 관련된 부동체는 같은 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" title="block formatting context">블록 형성 문맥</a> 내 앞선 부동체입니다.</p>
<div class="note">
<p><strong>주의:</strong> 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 <a href="/ko/docs/Web/CSS/Pseudo-elements">가상 요소</a>에 <code>clear</code>를 쓸 수 있습니다.</p>
<pre class="brush: css">#container::after {
content: "";
display: block;
clear: both;
}
</pre>
</div>
<h2 id="구문">구문</h2>
<pre class="brush: css">/* 키워드 값 */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* 전역 값 */
clear: inherit;
clear: initial;
clear: unset;</pre>
<h3 id="Values" name="Values">값</h3>
<dl>
<dt><code>none</code></dt>
<dd>요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 <em>않음</em>을 나타내는 키워드입니다.</dd>
<dt><code>left</code></dt>
<dd>요소가 지난 <em>left</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
<dt><code>right</code></dt>
<dd>요소가 지난 <em>right</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
<dt><code>both</code></dt>
<dd>요소가 지난 <em>both</em> left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
<dt><code>inline-start</code></dt>
<dd>요소가 <em>포함 블록의 시작 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>left</em> 부동체 및 rtl 스크립트의 <em>right</em> 부동체.</dd>
<dt><code>inline-end</code></dt>
<dd>요소가 <em>포함 블록의 끝 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>right</em> 부동체 및 rtl 스크립트의 <em>left</em> 부동체.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">예제</h2>
<h3 id="clear:_left" name="clear:_left">clear: left</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="left">This paragraph clears left.</p>
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.wrapper{
border:1px solid black;
padding:10px;
}
.left {
border: 1px solid black;
clear: left;
}
.black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: red;
width:20%;
}
p {
width: 50%;
}
</pre>
<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p>
<h3 id="clear:_right" name="clear:_right">clear: right</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="right">This paragraph clears right.</p>
</div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">.wrapper{
border:1px solid black;
padding:10px;
}
.right {
border: 1px solid black;
clear: right;
}
.black {
float: right;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: red;
width:20%;
}
p {
width: 50%;
}</pre>
<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p>
<h3 id="clear:_both" name="clear:_both">clear: both</h3>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="both">This paragraph clears both.</p>
</div></pre>
<h4 id="CSS_3">CSS</h4>
<pre class="brush: css">.wrapper{
border:1px solid black;
padding:10px;
}
.both {
border: 1px solid black;
clear: both;
}
.black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: red;
width:20%;
}
p {
width: 45%;
}</pre>
<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
<td>{{Spec2('CSS Logical Properties')}}</td>
<td><code>inline-start</code> 및 <code>inline-end</code> 값 추가</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>중요한 변화 없음, 세부사항은 명확해졌지만.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>초기 정의</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<div>{{Compat("css.properties.clear")}}</div>
<h2 id="See_also" name="See_also">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="Box model">박스 모델</a></li>
</ul>
|
