CSS에 수레를 지우는 문제가 있는 이유는 무엇입니까?

CSS에서 부동 소수점을 지우는 문제의 원인: 표준 흐름에서는 상위 요소에 높이 속성이 설정되어 있지 않으며 상위 요소의 하위 요소가 부동 요소의 위치를 ​​더 이상 차지하지 않기 때문에 부동입니다. 원본 문서 흐름에서는 부동 요소의 높이가 동일하지 않습니다. 즉, 상위 요소의 높이로 계산됩니다. 즉, 축소된 것처럼 보입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3, 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

1. 플로트 청소에 문제가 있는 이유는 무엇인가요?

(학습 동영상 추천: java 동영상 튜토리얼)

표준 흐름에 따라 상위 요소에 높이 속성이 설정되지 않은 경우 해당 높이가 하위 요소의 높이만큼 늘어납니다. 즉 적응형입니다. 그러나 이 상위 요소의 하위 요소가 플로팅인 경우 플로팅 요소는 더 이상 원래 문서 흐름의 위치를 ​​차지하지 않으므로 플로팅 요소의 높이는 상위 요소의 높이로 계산되지 않으며, 플로팅 요소의 높이는 상위 요소의 높이로 계산되지 않습니다. 상위 요소는 0입니다. 즉, 축소된 상태로 나타납니다. 이런 문제를 해결하기 위해 우리는 플로트 클리어를 제안했습니다.

2. CSS로 부동 소수점을 지우는 방법은 무엇입니까?

1. 상위 요소에 높이를 직접 추가

단, 플로팅 요소의 높이가 불확실한 경우에는 적용되지 않습니다.

2. 블록 수준 태그(p, div)를 직접 추가하려면clear:both를 사용하세요. ) 상위 요소의 하단 등) 그런 다음 명확하게 지정합니다. 둘 다 플로트를 지웁니다.

그러나 이것은 쓸모없는 빈 요소를 많이 생성하고 리소스를 낭비하며 최적의 솔루션이 아닙니다

3. BFC 사용:

(1) BFC란

문자 그대로 "블록 수준 서식 컨텍스트"로 번역됩니다. . BFC에서는 요소 레이아웃이 외부 세계의 영향을 받지 않는 독립적인 렌더링 영역이자 독립적인 레이아웃 환경입니다. BFC에서는 블록 상자와 라인 상자(라인 상자는 행의 모든 ​​인라인 요소로 구성됨)가 수직으로 배열됩니다. 상위 요소의 테두리를 따라. BFC는 페이지에서 분리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않습니다. 그리고 그 반대도 마찬가지입니다.

(2) 해결 방법 1:

상위 요소 스타일에overflow:hidden(표시되지 않는 한)을 추가합니다. 이 문을 추가하면 BFC가 생성되어 BFC에서 부동 요소를 트랩하고 문서 흐름에서 벗어나는 것을 방지합니다. 먼저 부동 요소의 높이를 계산한 다음 상위 요소가 높이를 얻으면 열립니다

(3) 해결 방법 2:

float:right를 추가합니다. 부모 요소에(없음이 아닌 한) 다음 문을 추가합니다. BFC도 생성됩니다. 원칙은 동일하지만 때로는 우리 요구 사항에 반하는 부모 요소를 플로팅할 필요가 없습니다.

4. 의사 클래스

를 사용하여 상위 요소 요소의 ::after 의사 요소를 통해 부동 요소의 형제를 생성한 다음 형제 요소에 대해 clear:both 메서드를 사용합니다.

관련 권장 사항:

CSS 튜토리얼

위 내용은 CSS에 수레를 지우는 문제가 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!