float로 인한 상위 요소 붕괴 문제 해결

float 부동으로 인한 상위 요소 붕괴에 대한 해결책은 다음과 같습니다: 상위 요소의 높이를 설정하고, 마지막 하위 요소 뒤에 빈 div를 설정하고, float를 지우기 위해 Clear를 사용하고, 다음에 대해 Overflow:hidden을 설정합니다. 가상 클래스 뒤에 추가

웹 페이지를 레이아웃할 때 float 속성이 자주 사용되지만, 상위 요소 아래의 하위 요소를 float로 설정하면 상위 요소가 접힙니다. 다음 글에서는 플로팅으로 인한 상위 요소 붕괴 문제를 해결하는 방법을 자세히 소개하겠습니다. 이는 확실한 참고 효과가 있으며 모든 분들께 도움이 되기를 바랍니다.

#🎜 🎜##🎜🎜 #

【추천 강좌:

CSS 튜토리얼】# 🎜🎜##🎜 🎜#요소의 상위 요소에 배경색을 설정하고 하위 요소에 float를 설정하면 상위 요소의 배경색이 사라지고 상위 요소에 테두리가 있는 경우를 볼 수 있습니다. , 부동 요소가 테두리를 열 수 없음을 알 수 있습니다.

예: li에 부동 소수점이 설정되지 않음

 <ul style="background: pink;border: 1px solid #ccc">
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  </ul>

렌더링:

#🎜🎜 #

플로트 설정 후

<ul style="background: pink;border: 1px solid #ccc">
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  </ul>

렌더링

#🎜 🎜 #

위 그림에서 볼 수 있듯이 자식 요소를 float로 설정하면 부모 요소의 내용이 늘어나지 않습니다. 즉, 요소가 부동으로 설정된 후에는 더 이상 전체 문서 흐름의 관할권 내에 있지 않습니다. 그러면 이전에 상위 요소에 존재했던 해당 높이가 이때 상위 요소와 함께 더 이상 존재하지 않게 됩니다. 요소는 기본적으로 콘텐츠가 없는 것으로 설정되며(전제: 상위 요소에 대해 고정 높이가 설정되지 않았음을 의미합니다. 상위 요소 자체에 고정 높이가 있으면 이러한 상황이 발생하지 않습니다) ##🎜 축소가 발생합니다. 🎜#
(1) 상위 요소에 높이 추가

이 방법으로는 높이를 확인할 수 없으며 높이를 설정하려면 여러 번 시도해야 합니다.

<ul style="height:200px;background: pink;border: 1px solid #ccc">

(2 ) 마지막 하위 요소 뒤에 빈 div를 추가하고 여기에 클리어 스타일을 추가한 다음 양쪽에서 부동 소수점을 지웁니다.

 <div style="clear:both;"></div>

(3) 상위 요소는 오버플로를 설정합니다.

 <ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">

; # 🎜🎜#(4) 상위 요소에 가상 클래스 이후를 추가합니다.

.parent:after{
content:"";
display:block;
clear:both;
}

Summary: 위 내용은 이 글의 전체 내용입니다. 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 float로 인한 상위 요소 붕괴 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!