Latest web development tutorials

CSS 플로트 (부동)

CSS 플로트 (플로트) 란 무엇입니까?



(부동)을 CSS 플로트이 요소가 왼쪽 또는 오른쪽으로 이동, 그 주위의 요소를 재 배열한다.

플로트 (플로팅), 종종 이미지에 사용되지만,이 경우에도 동일한 레이아웃 매우 유용하다.


어떻게 부동 요소

수평 플로팅 요소는 요소에만 좌우 이동할 수 있고 상하로 이동 할 수 있다는 것을 의미한다.

부동 요소는 왼쪽 또는 오른쪽의 국경을 넘어 바깥 쪽 가장자리 또는 다른 부동 상자에 들어있는 상자 지금까지 때까지 이동하려고합니다.

부동 요소 다음 요소가에 초점을 맞출 것이다.

부동 요소 전에 요소는 영향을받지 않습니다.

이미지가 오른쪽 부동 경우, 다음 문자는 왼쪽 주위에 흐를 것이다 :

img
{
float:right;
}

»시도


서로 인접 요소를 부동

합친 약간 떠있는 요소를 넣으면 여유가 있으면, 그 인접 할 것이다.

여기서 우리는 플로트 속성 사진 갤러리를 사용 :

.thumbnail
{
플로트 : 왼쪽;
폭 : 110px;
높이 : 90 픽셀;
여백 : 5px;
}

»시도


지우기 플로트 - 사용 분명

이를 피하기 위해, 재 배열 요소 주위에 떠 요소 후 맑은 속성을 사용한다.

분명한 특성은 요소가 플로팅 요소의 양측에 나타나지 않을 수 지정한다.

사진 갤러리를 추가하는 일반 텍스트 속성을 사용합니다 :

.text_line
{
clear:both;
}

»시도


예

더 많은 예제

왼쪽 이미지는 단락에 테두리와 마진과 수레를 추가

우리가 왼쪽으로 이미지 테두리와 마진과 단락 플로트를 추가하자

오른쪽 플로트에 제목과 사진

오른쪽 플로트에 제목과 사진을 보자.

왼쪽에 단락 부동의 첫 글자를 보자

스타일을 변경 왼쪽에 단락 부동의 첫 글자 있도록.

테이블에 페이지를 만들지 않습니다

페이지 머리글, 바닥 글 왼쪽 내용과 주요 콘텐츠를 만들 플로트를 사용합니다.


모든 CSS 플로트 속성

"CSS"열이 표시 CSS의 다른 버전 (CSS1 또는 CSS2)의 수는 속성을 정의합니다.

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1