CSS에서 부동이란 무엇입니까?

CSS에서 부동(Floating)이란 요소를 왼쪽이나 오른쪽으로 이동하는 동시에 그 주변의 요소도 재정렬된다는 의미입니다. 부동 요소는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 테두리에 닿을 때까지 최대한 왼쪽이나 오른쪽으로 이동합니다.

이 글의 환경: windows10, css3, 이 글은 모든 브랜드의 컴퓨터에 적용 가능합니다.

Float 소개:

CSS Float는 요소를 왼쪽이나 오른쪽으로 이동하고 주변 요소도 재정렬됩니다.

Float는 이미지에 자주 사용되지만 레이아웃에도 매우 유용합니다.

(동영상 공유 학습: css 동영상 튜토리얼)

요소를 어떻게 띄우나요?

요소의 수평 방향은 부동합니다. 이는 요소가 왼쪽과 오른쪽으로만 이동할 수 있고 위아래로 이동할 수 없음을 의미합니다.

부동 요소는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 경계에 닿을 때까지 왼쪽이나 오른쪽으로 이동하려고 합니다.

플로팅된 요소 뒤의 요소가 이를 둘러쌉니다.

플로팅된 요소 이전의 요소는 영향을 받지 않습니다.

이미지가 오른쪽으로 떠 있는 경우 다음 텍스트 흐름이 이미지를 왼쪽으로 둘러쌉니다.

예:

img{
    float:right;
}

플로팅된 요소가 서로 옆에 있습니다.

여러 개의 플로팅된 요소를 함께 배치하는 경우, 공간이 있는 경우, 그들은 서로 옆에 있을 것입니다.

예:

사진 갤러리에 float 속성 사용:

.thumbnail {
    float:left;    
    width:110px;    
    height:90px;    
    margin:5px;
}

Clear float - useclear

요소가 플로팅된 후 주변 요소가 재정렬됩니다. 이를 방지하려면 Clear 속성을 사용하세요.

clear 속성은 부동 요소가 요소의 양쪽에 나타날 수 없음을 지정합니다.

예:

클리어 속성을 사용하여 텍스트에 이미지 갤러리 추가:

.text_line{
    clear:both;
}

관련 권장 사항: css 튜토리얼

위 내용은 CSS에서 부동이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!