CSS 떠오름
- 이전 페이지 CSS 절대 정위치
- 다음 페이지 CSS 요소 선택자
浮动 프레임은 왼쪽 또는 오른쪽으로 이동할 수 있으며, 그의 외경계가 포함 프레임이나 다른浮动 프레임의 경계에 닿을 때까지 이동합니다.
浮动 프레임이 문서의 일반 흐름에 없기 때문에, 문서의 일반 흐름에 있는 블록은浮动 프레임이 없는 것처럼 행동합니다.
CSS 떠오름
그림을 보면, 프레임 1이 오른쪽으로 풍선될 때, 그것은 문서 흐름에서 벗어나 오른쪽으로 이동하여 그의 오른쪽 경계가 포함 프레임의 오른쪽 경계에 닿을 때까지 이동합니다:
다시 그림을 보면, 프레임 1이 왼쪽으로 풍선될 때, 그것은 문서 흐름에서 벗어나 왼쪽으로 이동하여 그의 왼쪽 경계가 포함 프레임의 왼쪽 경계에 닿을 때까지 이동합니다. 더 이상 문서 흐름에 있지 않기 때문에, 그것은 공간을 차지하지 않으며, 실제로 프레임 2를 덮어서 프레임 2가 시각적으로 사라지게 합니다.
모든 세 개의 프레임을 왼쪽으로 이동시키면, 프레임 1은 포함 프레임에 닿을 때까지 왼쪽으로 풍선되고, 다른 두 개의 프레임은 전자 풍선 프레임에 닿을 때까지 왼쪽으로 풍선됩니다.
그림에서 볼 수 있듯이, 포함 프레임이 너무 좁아 수평으로 배열된 세 개의 풍선 요소를 수용할 수 없다면, 다른 풍선 블록은 아래로 이동하여 충분한 공간이 되면 멈춥니다. 풍선 요소의 높이가 다를 때, 아래로 이동하면서 다른 풍선 요소에 의해 '끼워서' 막을 수 있습니다:
행 프레임과 정리
풍선 프레임 옆의 행 프레임이 줄어들어 풍선 프레임에 공간을 남기고, 행 프레임이 풍선 프레임을 둘러싸게 됩니다.
따라서, 텍스트를 이미지를 둘러싸도록 할 수 있는 풍선 프레임을 생성할 수 있습니다.
浮动框를 둘러싸는 행 프레임을 막기 위해, 해당 프레임에 적용해야 합니다. clear 속성clear 속성의 값은 left, right, both 또는 none이며, 그 값은 상자의 어떤 경계가 float 상자에 닿지 않도록 표시합니다.
이 효과를 구현하기 위해 정리된 요소의상단 외경계위에 충분한 공간을 추가하여 요소의 상단 경계가 float 상자 아래로 직립적으로 내려가도록 합니다：
이 도구는 주변 요소가 float 요소에 공간을 두어주도록 하는 유용한 도구입니다.
浮动과 정리를 더 자세히 살펴보겠습니다. 이미지를 텍스트 블록의 왼쪽으로 float로 설정하고, 이 이미지와 텍스트가 배경색과 테두리를 가진 다른 요소에 포함되기를 원한다면, 아래와 같은 코드를 작성할 수 있습니다：
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
이 경우 문제가 발생합니다.浮动 요소가 문서 흐름에서 벗어났기 때문에, 이미지와 텍스트를 둘러싸는 div는 공간을 차지하지 않습니다.
浮动 요소를 시각적으로 둘러싸기 위해 어떻게 해야 합니까? 이 요소의 어떤 곳에 clear를 적용해야 합니까：
그러나 새로운 문제가 발생했습니다. 정리할 수 있는 요소가 없기 때문에 비어 있는 요소를 추가하고 정리해야 합니다.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
이렇게 하면 원하는 효과를 얻을 수 있습니다. 그러나 추가적인 코드가 필요합니다. often clear를 적용할 수 있는 요소가 있지만, 때로는 레이아웃을 위해 의미 없는 태그를 추가해야 할 때가 있습니다.
그러나 우리는 또 다른 방법이 있습니다. 이는 컨테이너 div를 float로 설정하는 것입니다：
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
이렇게 하면 원하는 효과를 얻을 수 있습니다. 그러나 불운히 다음 요소는 이浮动 요소에 영향을 받습니다. 이 문제를 해결하기 위해, 어떤 사람들은 레이아웃의 모든 것을 float로 설정하고, 의미 있는 요소(대부분 사이트의 푸터)를 사용하여 이浮动를 정리하는 방법을 선택합니다. 이는 불필요한 태그를 줄이거나 제거하는 데 도움이 됩니다.
실제로 CodeW3C.com 사이트의 모든 페이지는 이 기술을 사용하고 있습니다. CSS 파일을 열면, 우리가 페이지 푸터의 div를 정리했음을 볼 수 있으며, 푸터 위의 세 개의 div는 왼쪽으로浮动되어 있습니다.
CSS clear 속성
지금까지 CSS 정리의 원리와 clear 속성의 사용 방법에 대해 자세히 논의했습니다. clear 속성에 대해 더 알고 싶다면 참조 매뉴얼을 방문하세요：CSS clear 속성。
浮动 및 정리 예제
- float 속성의 간단한 사용법
- 이미지를 한 문단의 오른쪽에 떠오르게 합니다.
- 경계선과 경계를 포함한 이미지를 문단의 오른쪽에 떠오르게 합니다.
- 이미지를 문단의 오른쪽에 떠오르게 하고, 이미지에 경계선과 경계를 추가합니다.
- 제목이 있는 이미지를 오른쪽에 떠오르게 합니다.
- 제목이 있는 이미지를 오른쪽에 떠오르게 합니다.
- 문단의 첫 글자를 왼쪽에 떠오르게 합니다.
- 문단의 첫 글자를 왼쪽에 떠오르게 하고, 이 글자에 스타일을 추가합니다.
- 수평 메뉴를 만들기 위해 떠오르기를 사용합니다.
- 하단 링크를 포함한 수평 메뉴를 만들기 위해 떠오르기를 사용합니다.
- 테이블 없는 첫 페이지를 만들기 위해 떠오르기를 사용합니다.
- 헤더, 푸터, 왼쪽 목차 및 주요 내용을 포함한 첫 페이지를 떠오르게 만들기 위해 떠오르기를 사용합니다.
- 지우는 요소의 측면
- 이 예제는 어떻게 떠오른 요소를 사용하여 요소의 측면을 지우는지 보여줍니다.
- 이전 페이지 CSS 절대 정위치
- 다음 페이지 CSS 요소 선택자
