'overflow:hidden'은 플로팅된 요소와 후속 콘텐츠에 어떤 영향을 미치나요?

CSS 오버플로: 부동 소수점으로 숨김

오버플로 속성의 영향 이해

CSS의 오버플로 속성은 처리 방법을 지정합니다. 포함된 요소의 경계를 초과하는 콘텐츠. 부동 하위 요소가 있는 요소에 적용하면 새로운 블록 형식 지정 컨텍스트가 설정됩니다.

텍스트 배치에 미치는 영향

다음 코드 조각을 고려하세요.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}

기본적으로 ul 뒤에 나타나는 단락(p) 요소는 아래쪽으로 푸시됩니다. 블록 수준 요소. 그러나 ul에서 오버플로가 숨겨지도록 설정된 경우 다음이 발생합니다.

• ul은 부동 하위 요소(lis)를 포함하는 블록 형식 지정 컨텍스트를 설정합니다.
• ul이 "다시 나타나고" 더 이상 0px 높이로 축소되지 않습니다.
• 단락(p)가 ul의 끝으로 밀려납니다. ul의 콘텐츠는 부동 요소 뒤에 나타납니다.

overflow:hidden이 ul이 하위 요소를 포함하는 블록 수준 요소처럼 작동하는 새로운 형식 지정 환경을 생성하기 때문입니다.

기술적 설명

CSS에 따름 사양:

• 오버플로가 '표시'되는 경우: "대체되지 않은 블록 수준 요소는 부동 소수점 속성에 관계없이 새로운 블록 형식 지정 컨텍스트를 설정하지 않습니다." ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• 오버플로가 '표시되지 않음'으로 설정된 경우 ' value: "블록 형식화 컨텍스트는 루트 요소가 인라인 수준 또는 원자적 인라인 수준 요소의 하위 목록 루트인 하위 트리의 루트 요소에 의해 설정됩니다. 요소는 다음과 같습니다. 부동, 절대적 위치에 있거나 '표시' 이외의 '오버플로'가 있습니다." ([§10.6.7](https://www.w3.org/TR/CSS21/visudet.html#포함-블록))

ul에 Overflow:hidden을 설정하면 새 블록 서식 지정 컨텍스트로 인해 하위 요소가 포함되고 단락이 맨 아래로 푸시됩니다.

위 내용은 'overflow:hidden'은 플로팅된 요소와 후속 콘텐츠에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!