CSS 클리어는 어떻게 플로트인가요?

이 글은 플로팅(코드 포함)이 무엇인지 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근에 CSS에 대해 알게 되었는데, 높이가 무너질 때 플로트를 지워야 한다는 걸 알게 되었어요. 플로팅 원리를 명확하게 이해하기 위해 인터넷에서 많은 정보를 검색해 봤는데 별로 명확하지도 않고 다 그렇더군요. 플로팅 원리에 대한 명확한 이해를

이미 플로팅이 무엇인지 및 플로팅 효과를 알고 계시다면 로 바로 이동하실 수 있습니다. 플로팅(키포인트) 읽기

1. 플로팅이 무엇인지
우선 포지셔닝을 알아야 합니다
페이지에서 요소의 위치가 포지셔닝입니다. 문제를 해결하기 전에 먼저 살펴보겠습니다. 여러 위치 지정 방법 이해
1. 일반 흐름 위치 지정(기본 방법)
　일반 흐름 위치 지정, 문서 흐름 위치 지정이라고도 하며 페이지의 블록 수준 요소에 대한 기본 위치 지정 방법입니다. 페이지의 인라인 요소: 왼쪽에서 오른쪽으로 하나씩 정렬됩니다. 그런데 어떻게 여러 블록 수준 요소를 한 줄에 표시할 수 있나요?
　플로팅 위치 지정이 발생합니다
2.
　float 속성의 값은 left/right 입니다.
　 이 속성은 원래 레이아웃용이 아니라 텍스트 줄바꿈용으로 사용했는데 나중에 사람들이 레이아웃용으로도 좋다는 사실을 알고 계속 사용하고 때로는 잊어버리기도 했습니다. 텍스트 줄바꿈에 사용하세요
3. 상대 위치 지정
　요소는 원래 위치를 기준으로 일정량 오프셋되며, 요소 위치를 변경한 후에도 요소의 원래 공간은 유지됩니다
속성: 위치
　값: 상대 　오프셋 속성(위/오른쪽/아래/왼쪽)을 사용하면 위치를 변경할 수 있습니다
4. 절대 위치 절대

요소를 절대 위치로 설정하면 다음과 같습니다. 특성
　1. 문서 흐름 밖 - 페이지 공간을 차지하지 않음
　2. 오프셋 속성을 통해 요소 위치 고정　3. 가장 가까운 위치에 있는 조상을 기준으로 요소가 고정 위치를 얻음　4. 위치가 지정된 조상 요소가 없는 경우 위치는 원래 포함 블록(본문, html)을 기준으로 고정됩니다.
　 속성: 위치
　 값: 절대
　 오프셋 속성(상단/오른쪽/하단/왼쪽)과 함께 고정 위치를 달성합니다.

5. 고정 위치 고정

페이지의 특정 위치에 요소를 고정하면 스크롤 막대와 함께 위치가 이동하지 않습니다.
속성: 위치
값: 고정 오프셋 속성(위/오른쪽/아래/왼쪽)을 사용하면 위치가 고정됩니다.


2. 플로팅 효과

　플로팅 후에는 어떻게 될까요? 　1. 플로팅 위치 요소는 문서 흐름에서 제외됩니다. 문서 흐름에서 제외되고(페이지 공간을 차지하지 않음) 나머지 요소는 앞으로 나와 공간을 채워야 합니다　　2. 플로팅 요소는 문서 흐름에 도킹됩니다. 상위 요소의 왼쪽 또는 오른쪽, 또는 다른 부동 요소의 가장자리에 도킹됨(요소는 현재 행에서만 부동 가능)
　3. 부동 요소는 여전히 상위 요소 내에 위치합니다　4. 부동 요소 처리 관련 문제 - 해결 여러 블록 수준 요소가 한 줄에 표시되는 문제 문제Note
　1. 플로팅된 요소를 모두 한 줄에 표시할 수 없으면 마지막 요소가 다른 줄로 줄 바꿈됩니다
　2. 요소가 플로팅되면 너비가 적응 가능(너비는 내용에 따라 결정됨)
　3. 일단 요소가 부동되면 상승한 후에는 블록 수준 요소가 됩니다. 특히 인라인 요소의 경우 가장 큰 영향을 미칩니다.
블록 수준 요소: 크기 수정 허용
인라인 요소: 크기 수정은 허용되지 않습니다
4. 텍스트, 인라인 요소, 인라인 블록 요소는 플로팅 요소가 아래에 묻히지 않도록 배치되어 플로팅 요소를 교묘하게 피합니다
떠오른 후에는 어떤 영향이 있을까요?
플로팅 요소는 문서 흐름에서 벗어나 페이지 공간을 차지하지 않으므로 상위 요소의 높이에 일정한 영향을 미칩니다. 요소에 포함된 모든 요소가 부동 요소인 경우 요소의 높이는 0이 됩니다(높이 붕괴)



3. 부동 요소를 지우는 방법(핵심 사항)

해결 방법 및 원리 분석

인터넷에는 많은 메소드가 있습니다. 여기서는 매우 사용하기 쉬운 메소드만 소개하겠습니다. 클래스 이름을 Clearfix로 설정하는 것입니다. 원리: 모든 하위 요소가 부동 상태이면 상위 요소가 무너집니다. , 따라서 모든 부동 하위 요소 뒤에 부동 요소를 추가합니다. 이 요소는 찾을 수 없고 공간을 차지하지 않으며 내부에 콘텐츠가 있을 수 없습니다.

추천 관련 기사:

CSS의 변환 원본 속성은 무엇을 합니까? 변환 원본 속성의 역할

CSS 언어를 사용하여 번개 연결선을 만드는 방법의 예

위 내용은 CSS 클리어는 어떻게 플로트인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!