CSS 규칙 "clear: both"는 무엇을 합니까?
다음 CSS 규칙이 수행하는 역할은 무엇입니까?
.clear { clear: both; }
그리고 왜 우리가 그것을 사용해야 합니까?
여기서는 플로트가 어떻게 작동하는지(자세히) 설명하지 않겠습니다. 이 질문은 일반적으로 왜 사용하는지 또는 정확히 무엇을 하는지에 초점을 맞추고 있기 때문입니다.
이 대답은 단순하게 하고 요점을 설명하겠습니다. 그리고 왜 그러는지 그래픽으로 설명하겠습니다.clear: both;필요한 것인지 아니면 그것이 하는 일인지...
일반적으로 설계자는 요소를 왼쪽 또는 오른쪽으로 띄우고, 다른 측면에 빈 공간을 만들어 다른 요소가 나머지 공간을 차지하도록 합니다.
왜 그들은 원소들을 띄우고 있는 것일까요?
설계자가 블록 레벨 요소 2개가 나란히 필요할 때 요소를 띄웁니다.예를 들어, 우리는 아래와 같은 레이아웃을 가진 기본적인 웹사이트를 디자인하고 싶다고 합니다.
데모용 코드
/* CSS: */
* { /* Not related to floats / clear both, used it for demo purpose only */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
header, footer {
border: 5px solid #000;
height: 100px;
}
aside {
float: left;
width: 30%;
border: 5px solid #000;
height: 300px;
}
section {
float: left;
width: 70%;
border: 5px solid #000;
height: 300px;
}
.clear {
clear: both;
}<!-- HTML -->
<header>
Header
</header>
<aside>
Aside (Floated Left)
</aside>
<section>
Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
Footer
</footer>참고: 추가해야 할 수도 있습니다.header,footer,aside,section 타 HTML5소)display: block;요소가 블록 수준 요소임을 명시적으로 언급하기 위한 스타일시트.
설명:
기본 레이아웃, 헤더 1개, 사이드바 1개, 콘텐츠 영역 1개, 바닥글 1개가 있습니다.
플로트 없음header은 입니다.aside웹 사이트 사이드바에 사용할 태그를 지정하여 요소를 왼쪽으로 이동합니다.
참고: 기본적으로 블록 레벨 요소는 문서의 너비를 100% 차지하지만, 왼쪽이나 오른쪽으로 이동하면 문서의 내용에 따라 크기가 조정됩니다.
그래서 당신이 주목한 것처럼, 왼쪽이 떠다닙니다.div오른쪽 공간을 사용하지 않은 채로 두므로div남은 공간을 이동하기 위해 그 후에.
좋아요, 블록 레벨 요소가 왼쪽이나 오른쪽에 뜨면 이렇게 작동하는 거죠, 그런데 왜 이제?clear: both;필요하고 왜죠?
레이아웃 데모에 기록해 두면 잊어버릴 경우를 대비해서 여기 있습니다.
저는 라는 클래스를 이용하고 있습니다..clear그리고 그것은 '라는 재산을 보유하고 있습니다.clear의 가치를 가지고both. 그럼 왜 필요한지 알아보겠습니다.both.
떠다녔다구요.aside그리고.section왼쪽에 있는 요소들, 그러니까 시나리오를 가정해보자, 우리가 풀을 가지고 있고,header단단한 땅입니다.aside그리고.section수영장에 떠있고 족자는 다시 단단한 땅이 됩니다. 이런..
따라서 블루 워터는 플로팅 요소의 면적이 얼마인지 전혀 알 수 없으며, 풀보다 클 수도 있고 작을 수도 있습니다. 따라서 CSS 초보자의 90%를 문제 삼는 일반적인 문제가 있습니다. 즉 컨테이너 요소가 플로팅 요소를 보유하고 있을 때 왜 컨테이너 요소의 배경이 문제는 다음과 같습니다.컨테이너 요소는 여기서 풀(POOL)이고 풀(POOL)은 얼마나 많은 물체가 떠 있는지, 떠 있는 요소의 길이나 폭이 얼마인지 전혀 모르기 때문에 쉽게 늘어나지 않습니다.
(이를 위한 깔끔한 방법은 이 답변의 섹션을 참조하십시오.빈칸을 사용하고 있습니다.div설명을 위해 의도적으로 예시하기)
위에 3가지 예시를 제시했는데, 첫번째는 정상적인 문서 흐름입니다.red컨테이너에 플로팅된 개체가 없기 때문에 background는 예상한 대로 렌더링됩니다.
두 번째 예에서, 객체가 왼쪽으로 플로팅될 때, 컨테이너 요소(POOL)는 플로팅된 요소의 치수를 알지 못할 것이고, 따라서 플로팅된 요소의 높이로 확장되지 않을 것입니다.
사용후clear: both;, 컨테이너 요소는 플로팅 요소 치수까지 늘어납니다.
또 다른 이유는.clear: both;는 요소가 나머지 공간에서 위로 이동하는 것을 방지하기 위해 사용됩니다.
두 개의 원소가 나란히 있고 그 아래에 또 다른 원소가 있다면...따라서 2개의 요소를 왼쪽으로 띄우고 나머지는 그 아래로 띄우길 바랍니다.
첫번째 예시
두번째 예시
마지막으로 중요한 것은 아니지만,footer태그는 내가 사용한 것처럼 플로팅된 요소 뒤에 렌더링됩니다.clear나를 선언하기 전에 수업footer태그: 모든 플로팅 요소(좌/우)를 해당 지점까지 클리어합니다.
수정 지우기
플로트와 관련된 문제를 해결하기 위해 왔습니다.@Elky에서 이미 지정한 대로 이러한 플로트를 클리어하는 방법은 빈 공간을 사용하기 때문에 올바른 방법이 아닙니다.diva가 아닌 원소div요소는 다음에 사용됩니다.따라서 명확한 해결책이 나타납니다.
상위 요소가 종료되기 전에 빈 요소를 생성하는 가상 요소라고 생각합니다.이렇게 하면 띄운 요소를 담고 있는 포장지 요소가 자동으로 지워집니다.이 요소는 말 그대로 DOM에 존재하지 않지만 작업을 수행합니다.
떠있는 요소를 가진 포장지 요소를 스스로 지우기 위해서는 다음을 사용할 수 있습니다.
.wrapper_having_floated_elements:after { /* Imaginary class name */
content: "";
clear: both;
display: table;
}
를 합니다.:after내가 그것을 위해 사용한 유사 요소.class가 닫히기 요소에 대한 그러면 래퍼 요소가 닫히기 직전에 래퍼 요소에 대한 가상 요소가 생성됩니다.돔을 보면 문서 트리에 어떻게 표시되는지 확인할 수 있습니다.
그러니까 보시면, 공중에 떠있는 아이의 이름을 따서 렌더링되는 겁니다.div우리가 빈 공간을 갖는 것과 다름없는 부유물들을 치우는 곳.div와의 요소.clear: both;우리도 이것을 위해 사용하고 있는 부동산. 왜ydisplay: table;그리고.content는 이 답변 범위를 벗어났지만 여기서 의사 요소에 대해 더 자세히 알 수 있습니다.
IE8이 의사를 지원하므로 IE8에서도 이 기능이 작동합니다.
원래 답변:
는 자신의 를 왼쪽 을 들고 를 왼쪽 공간은 하지 않고 에 다른 뜨기 를 방지하기 띄우고, 아마도 로고, 사이드바, 콘텐츠 등을 들고 디브를 왼쪽 또는 오른쪽으로 띄우고, 나머지 공간은 사용하지 않고, 따라서 다른 컨테이너를 놓으면 남은 공간에도 뜨기 때문에 이를 방지하기 위해.clear: both;가 사용되며, 왼쪽 또는 오른쪽에 떠 있는 모든 요소를 지웁니다.
시연:
------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------
이제 아래의 다른 분할자를 만들려면 어떻게 해야 합니까?div1, 그래서 당신은clear: both;왼쪽이든 오른쪽이든 모든 플로트를 치울 수 있게 해줍니다.
------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
이 속성은 요소의 왼쪽, 오른쪽 또는 양쪽이 동일한 블록 서식 컨텍스트 내의 이전 플로팅 요소에 인접할 수 없음을 나타냅니다.클리어된 요소는 해당 플로팅된 요소 아래로 푸시됩니다.예:
clear: none;요소가 플로팅된 요소와 인접하게 유지됨
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-none {
clear: none;
background: #FFF;
}<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>clear: left;좌부동 요소 아래로 밀린 요소
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 120px;
background: #CEF;
}
.clear-left {
clear: left;
background: #FFF;
}<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>clear: right;우측 플로팅 요소 아래로 밀린 요소
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-right {
clear: right;
background: #FFF;
}<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>clear: both;모든 떠 있는 요소 아래로 밀려 있는 요소
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-both {
clear: both;
background: #FFF;
}<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>clear현재 블록 서식 컨텍스트 외부의 플로트에는 영향을 주지 않습니다.
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.inline-block {
display: inline-block;
background: #BDF;
}
.inline-block .float-left {
height: 60px;
}
.clear-both {
clear: both;
background: #FFF;
}<div class="float-left">float: left;</div>
<div class="inline-block">
<div>display: inline-block;</div>
<div class="float-left">float: left;</div>
<div class="clear-both">clear: both;</div>
</div>제거해 보십시오.clear:both에서 나온 재산div와 함께class sample어떻게 떠다니는지도 보고요divs.
에일리언 씨의 대답은 완벽하지만 어쨌든 저는 당신이 사용하는 것을 추천하지 않습니다.<div class="clear"></div>마크업을 더럽게 만드는 해킹에 불과하기 때문입니다.이것은 쓸모없는 빈 것입니다.div나쁜 구조와 의미적인 면에서, 이것은 또한 당신의 코드를 유연하게 만들지 못하게 만듭니다.일부 브라우저에서는 이 div가 추가 높이를 유발하므로 추가해야 합니다.height: 0;그보다 더 나쁜 것은.그러나 실제 문제는 띄운 요소 주변에 배경이나 테두리를 추가하고자 할 때 시작됩니다. 웹이 잘못 설계되었기 때문에 이 문제는 붕괴될 뿐입니다.저는 clearfix CSS 규칙이 있는 컨테이너에 플로팅 요소를 포장하는 것을 추천합니다.이것 또한 해킹이지만 아름답고, 인간과 SEO 로봇을 위해 사용하고 읽을 수 있도록 더 유연합니다.
한 요소를 하단에 배치하고 싶을 때 다른 요소는 CSS에서 이 코드를 사용합니다.그것은 부유물에 사용됩니다.
콘텐츠를 띄우면 왼쪽 또는 오른쪽으로 띄울 수 있습니다.따라서 일반적인 레이아웃에서는 왼쪽 탐색기, 컨텐츠 디브 및 바닥글이 있을 수 있습니다.
바닥판이 이 두 플로트 아래에 있도록 하려면(좌우로 떠 있는 경우) 바닥판을 다음과 같이 놓습니다.clear: both.
이렇게 하면 양쪽 부유물 아래에 머물게 됩니다.
(왼쪽만 지우고 있다면 정말로 해야 합니다.clear: left;.)
언급URL : https://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do
'programing' 카테고리의 다른 글
| 워드프레스의 사용자 정의 범주 트리 (0) | 2023.10.24 |
|---|---|
| 모듈 2개 사이에 구성 요소 공유 (0) | 2023.10.24 |
| PHP 경고를 보여주거나 던지는 방법이 있습니까? (0) | 2023.10.24 |
| C#의 XDocument를 사용한 XML 파일 작성 (0) | 2023.10.24 |
| WP REST API GET 요청 인증 (0) | 2023.10.24 |