집 >웹 프론트엔드 >HTML 튜토리얼 >HTML의 플로트 및 클리어 플로트

HTML의 플로트 및 클리어 플로트

墨辰丷원래의: 2018-06-04 15:53:262145검색

이 글은 주로 HTML에서의 Floating과 Clearing을 소개하고 있으니 관심 있는 친구들이 참고하시면 좋을 것 같습니다.

1. float: 주요 목적은 이미지를 텍스트로 감싸는 효과를 얻는 것입니다.

또한 다중 열 레이아웃을 만드는 가장 쉬운 방법이 되었습니다.

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

【1】텍스트 줄 바꿈 그림

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

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

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

2. 플로팅 요소는 문서 흐름에서 벗어났으며 상위 요소는 그럴 수 없습니다. , 그를 둘러싸지 않기 때문에 하위 요소는 높이를 가지지만 상위 요소는 지원되지 않습니다.

이 문제를 해결하는 방법에는 세 가지가 있습니다. 상황을 파악하고 합리적으로 적용하세요:

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

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

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

이러한 문의 실제 목적은 상위 요소를 방지하는 것입니다. 너무 큰 콘텐츠로 인해 늘어나는 것을 방지합니다. Overflow: Hidden을 적용한 후 상위 요소는 설정된 너비로 유지되며, 너무 큰 하위 콘텐츠는 컨테이너에 의해 잘립니다.

또한 Overflow: Hidden은 또 다른 효과가 있습니다. 상위 요소가 부동 하위 요소를 포함하도록 강제합니다.

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

[2] 부모 요소를 동시에 플로팅하고, 너비는 브라우저 너비와 100% 동일하며, 바닥글이 섹션 옆에 눌리지 않도록 바닥글에 클리어 플로트를 설정합니다

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

바깥쪽 여백 요소 사용 근처에 자동으로 중앙에 배치될 수 없습니다. 그렇지 않으면 더 이상 중앙에 위치하지 않습니다.

【3】플로팅되지 않는 클리어 요소 추가(의사 요소)

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

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

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

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

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

HTML의 플로트 및 클리어 플로트

관련 기사