`overflow:hidden`은 `및 후속 텍스트 배치 내의 플로팅 요소에 어떤 영향을 줍니까?

CSS 오버플로:Floats 설명으로 숨김

질문: 오버플로 속성이 상대적인 텍스트 배치에 어떤 영향을 미칩니까? float를 포함하는 ul에 요소?

설명:

기본적으로 ul 및 p와 같은 블록 수준 요소는 상위 너비의 100%까지 늘어납니다. 주어진 예에서 ul에는 부동 소수점 li 요소만 포함되어 전체 너비를 유지하면서 0px 높이로 축소됩니다.

그 결과, 인접한 p 요소가 부동 소수점 오른쪽에 나타납니다. li 요소를 일반 부동 소수점으로 처리합니다.

그러나 Overflow:hidden이 ul에 적용되면 li를 효과적으로 포함하는 새로운 BFC(블록 형식 지정 컨텍스트)가 설정됩니다. ul 내의 요소. 이렇게 하면 ul이 무너지는 것을 방지하고 p 요소가 아래쪽으로 강제로 밀려 플로팅된 li 요소가 지워집니다.

기술 세부 정보:

CSS 사양에 따름 , 일반 흐름에서 대체되지 않은 블록 수준 요소에 대해 오버플로가 표시되면 해당 요소는 표준 블록 요소로 작동합니다. 그러나 오버플로를 보이지 않는 값(숨김 포함)으로 설정하면 BFC가 생성되어 다른 동작이 발생합니다.

예:

다음 코드를 고려하세요.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #dddddd;
  border: 2px solid red;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #555;
  color: white;
}

p {
  margin: 0;
  outline: 2px dotted blue;
}

#two {
  clear: both;
  overflow: hidden;
}

없음 Overflow:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<p>
  Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats
</p>

Over Overflow:

<ul>

보시다시피, ul에 Overflow:hidden을 적용하면 플로팅된 li 요소가 ul 내에 포함되고 p 요소를 지워서 페이지 하단으로 밀어넣습니다.

위 내용은 `overflow:hidden`은 `및 후속 텍스트 배치 내의 플로팅 요소에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!