투명 플로트 및 폐쇄형 플로트 소개

이 기사는 플로트 청소 및 클로징에 대한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

float를 지워야 하는 이유는 무엇입니까?

• 하위 요소 float:left는 상위 요소를 붕괴시킵니다(지원할 수 없음)

• 상위 요소는 하위 요소

• float 지우기clear :both

<h1>清除浮动</h1>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}

• Closed float - 추가 요소 추가clear:both

상위 요소가 높이를 설정하지 않습니다

子元素 float:left

额外增加元素 clear:both

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>

• Closed float - br 및 사용 자체 html 속성

= =Note==clear=all 더 이상 사용되지 않는 속성(moz)

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>

• Closed float--부모 요소는 Overflow:hidden

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

• Closed float--부모를 설정합니다. 요소 세트 표시:table

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

위 내용은 투명 플로트 및 폐쇄형 플로트 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!