CSS 요소를 플로팅할 때 주의해야 할 사항은 무엇입니까?

참고: 1. 부동 요소의 왼쪽 외부 경계는 포함 블록의 왼쪽 내부 경계를 초과할 수 없으며 오른쪽 외부 경계도 마찬가지입니다. 2. 부동 요소의 상단은 내부 상단보다 높을 수 없습니다. 3. 부동 요소의 상단은 이전에 부동된 요소 또는 블록 수준 요소의 상단보다 높을 수 없습니다. 4. 왼쪽 부동 요소는 가능한 한 왼쪽에 있어야 합니다. 부동 요소는 가능한 한 오른쪽에 있어야 합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

Css의 부동:

CSS에서 요소를 상위 요소의 왼쪽이나 오른쪽으로 이동하려면 해당 요소에 부동 소수점을 설정할 수 있습니다.

float:left/right

부동 선택에는 두 가지 유형이 있습니다. 하나는 float:left입니다. float:right right float도 있습니다

float를 요소로 설정하면 요소는 표준 문서 흐름에서 벗어나 요소 뒤의 요소가 요소의 원래 위치를 차지하고 요소 뒤의 내용은 요소는 돌출이 됩니다.

float가 추가된 요소에는 너비와 높이가 없으며 요소의 상위 요소 높이도 표시됩니다. 즉, float가 추가된 요소의 너비와 높이가 동적으로 변경되어야 합니다. 요소 내부의 콘텐츠에. 상위 요소의 높이를 재설정합니다.

일부 요소에 대해 왼쪽 부동이 설정된 경우 이러한 요소는 동일한 행에 표시되지만 이러한 요소의 너비 합계가 상위 요소보다 큰 경우 초과 부분(요소 포함)은 다음 줄에 표시됩니다.

부동 요소가 따라야 하는 규칙(참고)

• 부동 요소의 왼쪽 외부 경계는 포함 블록의 왼쪽 내부 경계를 초과할 수 없으며 오른쪽도 마찬가지입니다

• 플로팅 요소가 서로 겹치는 것을 방지합니다. 요소의 왼쪽(또는 오른쪽) 외부 경계는 소스 문서의 이전 왼쪽 플로트(오른쪽 플로트) 요소의 오른쪽(또는 왼쪽) 외부 경계여야 합니다. 나중에 플로팅된 요소는 먼저 플로팅된 요소의 바닥 아래에 있습니다.
  

• 플로팅된 요소의 외부 왼쪽 가장자리는 소스 파일에서 이전에 나타난 왼쪽 플로팅된 요소의 외부 오른쪽 가장자리여야 합니다. 단, 나중에 플로팅된 요소의 상단이 이전에 플로팅된 요소의 하단 아래에 있는 경우는 제외됩니다.

• 왼쪽 부동 요소의 오른쪽 외부 테두리는 오른쪽 부동 요소의 오른쪽 외부 테두리 오른쪽에 표시되지 않습니다.

• 플로팅된 요소의 상단은 상위 요소의 내부 상단보다 높을 수 없습니다.

• 플로팅된 요소의 상단은 이전의 모든 플로팅된 요소 또는 블록 수준 요소의 상단보다 높을 수 없습니다.

• A가 있는 경우 부동 요소는 다른 요소 앞에 올 수 없으며 부동 요소의 상단은 해당 요소에 의해 생성된 상자를 포함하는 모든 라인 상자의 상단보다 높을 수 없습니다.

• 플로팅된 요소는 포함된 요소의 경계를 초과할 수 없습니다. 왼쪽(또는 오른쪽) 부동 요소는 왼쪽(또는 오른쪽)에 또 다른 부동 요소를 가지며 전자의 오른쪽 외부 경계는 포함 블록의 오른쪽(또는 왼쪽) 경계의 오른쪽(또는 왼쪽)에 있을 수 없습니다. 공간이 충분하지 않으면 플로팅된 요소가 새 "행"에 압착됩니다.

• 플로팅된 요소는 가능한 높은 위치에 배치되어야 합니다. 즉, 다른 제약 조건을 만족한다는 전제 하에 최대한 높게 플로팅합니다.

• 왼쪽 부동 요소는 가능한 한 왼쪽에 있어야 하고 오른쪽 부동 요소는 가능한 한 오른쪽에 있어야 합니다.

부동 정렬 규칙

• 부동 요소 동일한 방향이 먼저 표시됩니다. 플로팅은 표준 흐름만 다루기 때문입니다.

• 플로팅 요소는 왼쪽 플로팅을 찾고, 오른쪽 플로팅은 오른쪽 플로팅을 찾습니다.

• 위치 플로팅 후 플로팅 요소의 크기는 플로팅 요소의 플로팅 전 기준에 따라 결정됩니다.

• 패킹 현상: 마지막 플로팅 요소가 상위 요소의 너비를 초과하면 자동으로 찾습니다. 너비가 여전히 충분하지 않으면 계속해서 이전 요소를 찾으세요~ 상위 요소의 너비가 여전히 충분하지 않으면 그것만으로 충분합니다

• 혼합된 그래픽과 text

Clear float

• 이전 상위 요소의 높이를 설정합니다(개발 중에는 높이를 설정하지 않는 것이 가장 좋으므로 이러한 편의상 권장하지 않습니다)

• clear 속성을 설정합니다. 다음 요소의 경우 (clear 속성을 추가한 후에는 margin 속성이 무효화됨에 유의하세요.)

• Partition Wall Method

  • Exterior Wall Method

    Middle 블록 수준 요소 추가 및 Clear 설정: 둘 다(참고 : 두 번째 상자에는 margin-top을 사용할 수 있지만 첫 번째 상자에는 margin-bottom을 사용할 수 없으므로 일반적으로 첫 번째 상자의 margin-bottom을 설정하지 않거나 두 번째 상자의 margin-top을 설정하지 않습니다. 그러나 추가 블록 수준 요소의 높이는 직접 설정)

  • 내부 벽 방법

    블록 수준 요소를 첫 번째 상자 끝에 쓰고 Clear:both를 설정합니다. (참고: 첫 번째 상자는 여백을 사용할 수 있습니다. 하단, 두 번째 상자도 margin-top을 사용할 수 있습니다. 추가 블록 수준 요소도 높이를 설정할 수 있습니다.)

  • 차이점: 내벽 방식은 첫 번째 상자의 높이를 지원할 수 있지만 외벽 방식은 지원하지 않습니다. (수정된 방식도 추가 요소가 추가되므로 권장하지 않습니다.)

유사 요소 사용을 권장합니다. 사용)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

overflow: 숨김(권장 사용)

.box1{
    *zoom: 1;   // 兼容IE6
}

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS 요소를 플로팅할 때 주의해야 할 사항은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!