HTML 부동 및 클리어 부동에 대한 자세한 설명

이 글에서는 주로 플로팅 및 클리어 플로트에 대한 개요를 제공하고 이를 설명하기 위한 예시를 제공합니다. 에디터를 사용하여 살펴보겠습니다.

1. 플로트(Float): 주요 목적은 그림을 감싸는 텍스트의 효과를 얻는 것입니다.

다중 열 레이아웃을 만드는 가장 쉬운 방법이기도 합니다.

【1]텍스트 감싸기 그림

<img src= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

【2】다열 레이아웃 만들기

　　P {margin: 0; border: solid 1px;}
　　img {float: left;}

2. 플로팅 요소가 문서에서 벗어났습니다. 하위 요소는 높이를 갖지만 상위 요소는 지원되지 않습니다.

해결 방법은 다음 세 가지가 있습니다, 상황을 고려하여 합리적으로 적용하시기 바랍니다.

　　P {margin: 0; border: solid 1px; width: 200px; float: left;}
　　img {float: left;}

<section>
<img src=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>

【1 】오버플로 추가: 상위 요소에 숨겨집니다. 상위 요소가 부동 요소를 둘러싸도록 합니다.

이러한 문의 실제 목적은 다음과 같습니다. 너무 큰 콘텐츠로 인해 상위 요소가 늘어나는 것을 방지하기 위해, 상위 요소는 설정된 너비를 계속 유지하지만, 너무 큰 하위 콘텐츠는 컨테이너에 의해 잘립니다.

또한 Overflow: Hidden은 또 다른 효과는 즉, 상위 요소가 부동 하위 요소를 포함하도록 안정적으로 강제할 수 있다는 것입니다.

은 드롭다운 메뉴를 사용하는 최상위 요소에 사용할 수 없습니다. 그렇지 않으면 하위 요소인 드롭다운 메뉴가 표시되지 않습니다.

[2] 부모 요소를 동시에 플로팅하고 너비는 브라우저 너비와 100% 동일하며 바닥글에 클리어 플로트를 설정하여 바닥글이

section , footer {border: solid 1px;}
img {float: left;}

섹션 옆을 꽉 쥐지 마십시오. 여백 근처에 자동으로 중앙에 배치되는 요소에는 사용할 수 없습니다. 그렇지 않으면 더 이상 중앙에 위치하지 않습니다.

【3】비부동 클리어 요소 추가(의사 요소)

　　section {border: solid 1px; float: left; width:100%}
　　footer {border: solid 1px; clear: left}
　　img {float: left;}

3. 상위 요소가 없을 때(그룹으로 img p, 상위 요소 없음) 지우는 방법

.clearfix: after {
　　content: "";
　　display: block ;
　　height: 0
　　visibility: hidden;
　　clear : both
}

<section>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>

위 내용은 HTML 부동 및 클리어 부동에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!