이 글의 내용은 CSS에서 상위 요소의 높이 붕괴가 무엇을 의미하고 어떻게 해결하는지에 관한 것입니다. , 특정 참조 가치가 있으므로 도움이 필요한 친구가 참조할 수 있으므로 도움이 되기를 바랍니다.
<p class="box1"> <p class="box2"></p> </p>
<style type="text/css"> .box1{ border: 10px red solid; } .box2{ background-color: yellow; width: 100px; height: 100px; float: left; } </style>
clear:both
를 사용하면 됩니다. HTML & CSS 코드는 다음과 같습니다: clear:both
即可, HTML & CSS 代码如下:<p class="fl">我是左浮动元素</p> <p class="fr">我是右浮动元素</p> <p class="cb">我不受浮动元素的影响</p>
.fl { float: left; } .fr { float: right; } .cb { clear: both; }
clear: both
<p>clear:both
clear:both
,所以该元素就能不受浮动元素影响出现在父元素的最底部,而父元素计算高度的时候需要考虑到这个正常元素的位置,所以高度自然包裹到了最底部,也就没有了坍塌。<p>对于这个方法,以前我们是利用新增一个空元素(<b>
或 <span>
或 <p>
等)来实现的,如下:<p class="container"> <p class="box"></p> <span class="clear-box"></span> </p>
.box { float: left; } .clear-box { clear: both; }
<p class="container clearfix"> <p class="box"></p> </p>
.clearfix::after { content:""; display:table; clear: both; }
clearfix
类名,该类使用 ::after
伪元素类选择器增加一个内容为空的结构来清除浮动,可能你们比较疑惑的是为什么要设置 display:table
<p class="container"> <p class="box"></p> </p>
.container { overflow: hidden; } .box { float: left; }
clear:both
<p>clear:both
clear:both
를 사용하므로 이 요소는 플로팅 요소의 영향을 받지 않고 나타날 수 있습니다. 는 상위 요소의 하단에 있으며, 상위 요소의 높이를 계산할 때 이 일반 요소의 위치를 고려해야 하므로 높이가 자연스럽게 아래쪽으로 감싸져 붕괴가 발생하지 않습니다. <p>이 방법에서는 빈 요소(<b>
또는 <span>
또는 <p>
등)를 추가했습니다. .), 다음과 같습니다: rrreeerrreee🎜이 방법은 더 직관적이지만 쓸모없는 빈 라벨을 추가하므로 나중에 유지 관리가 중복되고 불편하기 때문에 그다지 우아하지는 않습니다(일반적으로 이 방법을 사용하지 않는 것이 좋습니다). 그래서 나중에 상위 요소의 의사 요소(::after)를 통해 구현된 유명한 Clearfix 메소드가 있었습니다. 코드는 다음과 같습니다. 🎜rrreeerrreee🎜위 메소드는 상위 요소에 clearfix
클래스 이름, 이 클래스는 부동을 지우기 위해 빈 내용이 있는 구조를 추가하기 위해 ::after
의사 요소 클래스 선택기를 사용합니다. display:table code> 속성을 설정해야 하는 이유에 대해 더 혼란스러워집니다. 이는 실제로 비교적 복잡한 진화 과정을 포함합니다. 자세한 내용은 참조 - Clearfix Floating Evolution History🎜🎜New BFC🎜🎜원칙을 참조하세요. 이 방법은 다음과 같습니다. 상위 요소가 새 BFC를 생성하면 해당 높이가 계산됩니다. 부동 하위 요소를 래핑합니다. 🎜🎜 예시를 증거로 사용해 보겠습니다. 아래와 같이 사진이 떠 있고, 상위 요소 기사의 높이가 접혀 있으며(그림은 포함되지 않음), 루트 요소 HTML(기본적으로 루트 요소 HTML은 BFC입니다.) ) 높이에는 이미지의 높이가 포함됩니다. 🎜🎜🎜🎜🎜🎜🎜🎜새 BFC를 생성하면 상위 요소 높이 축소 문제를 해결할 수 있으므로 다음과 같이 BFC를 생성할 수 있습니다. 🎜🎜🎜🎜루트 요소 또는 이를 포함하는 기타 요소🎜🎜 🎜🎜 🎜🎜Float(요소의 float가 없음이 아님)🎜🎜🎜
overflow: hidden
,代码如下:<p class="container"> <p class="box"></p> </p>
.container { overflow: hidden; } .box { float: left; }
위 내용은 CSS에서 상위 요소의 높이 붕괴는 무엇을 의미하며 어떻게 해결합니까? (코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!