CSS 레이아웃 - 부유와 클리어
- 이전 페이지 CSS 부산물
- 다음 페이지 CSS 플로팅 제거
CSS 레이아웃 - 부유와 클리어
CSS float 속성은 요소가 어떻게浮动될지 정의합니다.
CSS clear 속성은 어떤 요소가 제거된 요소의 옆에 및 어디쪽에浮动할 수 있는지 정의합니다.
float 속성
float 속성은 내용을 정위치하고 포맷하는 데 사용됩니다. 예를 들어, 이미지가 컨테이너 내 텍스트에 왼쪽으로浮动되도록 합니다.
float 속성은 다음 중 하나의 값을 설정할 수 있습니다:
- left - 요소는 컨테이너의 왼쪽으로浮动합니다
- right - 요소는 컨테이너의 오른쪽에浮动합니다
- none - 요소는浮动하지 않습니다 (텍스트에서 최초로 나타난 위치에 표시됩니다). 기본 값.
가장 간단한 사용 방법은,float 이 속성은 (신문에서) 텍스트를 이미지로 둘러싸는 효과를 구현할 수 있습니다。
예제 - float: right;
이 예제에서는 이미지가 텍스트 내에서 오른쪽으로浮动될 것을 지정합니다:
领先的 Web 技术教程 - 全部免费。在 CodeW3C.com，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
우리의 참조 매뉴얼은 웹 기술의 모든 측면을 다룹니다. 이 중에는 W3C 표준 기술인 HTML, CSS, XML이 있으며, JavaScript, PHP, SQL 등 다른 기술도 포함됩니다.
CodeW3C.com에서는 수천 개의 예제를 제공합니다. 온라인 편집기를 사용하여 이 예제를 편집하고 코드를 실험할 수 있습니다.
예제
img {
float: right;
}
예제 - float: left;
이 예제에서는 이미지가 텍스트 내에서왼쪽으로浮动:
领先的 Web 技术教程 - 全部免费。在 CodeW3C.com，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
우리의 참조 매뉴얼은 웹 기술의 모든 측면을 다룹니다. 이 중에는 W3C 표준 기술인 HTML, CSS, XML이 있으며, JavaScript, PHP, SQL 등 다른 기술도 포함됩니다.
CodeW3C.com에서는 수천 개의 예제를 제공합니다. 온라인 편집기를 사용하여 이 예제를 편집하고 코드를 실험할 수 있습니다.
예제
img {
float: left;
}
예제 - No float
이 예제에서는 이미지가 텍스트에서 최초로 나타난 위치에 표시됩니다 (float: none;):
领先的 Web 技术教程 - 全部免费。在 CodeW3C.com，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
우리의 참조 매뉴얼은 웹 기술의 모든 측면을 다룹니다. 이 중에는 W3C 표준 기술인 HTML, CSS, XML이 있으며, JavaScript, PHP, SQL 등 다른 기술도 포함됩니다.
CodeW3C.com에서는 수천 개의 예제를 제공합니다. 온라인 편집기를 사용하여 이 예제를 편집하고 코드를 실험할 수 있습니다.
예제
img {
float: none;
}
확장 阅读
추가读物:CSS 플로팅
- 이전 페이지 CSS 부산물
- 다음 페이지 CSS 플로팅 제거
