기술나눔

HTML의 플로팅 기능에 대한 자세한 설명

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

HTML의 "플로트"는 원래 텍스트가 이미지 주위를 감싸거나 요소를 나란히 배열하는 등 간단한 레이아웃 효과를 얻기 위해 설계된 CSS 레이아웃 기술입니다. 그러나 웹 개발이 발전함에 따라 최신 CSS가 Flexbox 및 Grid와 같은 고급 레이아웃 방법을 제공함에도 불구하고 부동 소수점은 더 복잡한 페이지 레이아웃 디자인에도 널리 사용되었습니다.

플로팅의 기본 기능

  1. 텍스트 줄 바꿈 : 이것은 float의 가장 독창적이고 직관적인 응용 프로그램입니다. 이미지(또는 다른 블록 수준 요소)가 부동으로 설정되면 주변 텍스트가 일반적인 문서 흐름(위에서 아래로, 왼쪽에서 오른쪽으로)을 계속하는 대신 이미지 주위로 흐릅니다.

  2. 나란히 배치 : 여러 요소에 부동 소수점을 설정하면 기본적으로 쌓이지 않고 나란히 정렬할 수 있습니다. 이는 탐색 모음, 이미지 갤러리 또는 요소를 가로로 정렬해야 하는 레이아웃을 만들 때 유용합니다.

플로트 사용 방법

  • CSS 속성:통과하다float 부동 요소에 대한 속성입니다.이 속성은 다음을 포함하여 여러 값을 허용할 수 있습니다.left、right、none(기본값, 부동 소수점이 없음을 의미) 및inherit(상위 요소에서 상속됨float값).

  • 예：

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <style>  
    5.     .float-left {  
    6.       float: left;  
    7.       width: 50%;  
    8.     }  
    9.     .float-right {  
    10.       float: right;  
    11.       width: 50%;  
    12.     }  
    13.   </style>  
    14. </head>  
    15. <body>  
    16.  
    17. <div class="float-left">左边的内容</div>  
    18. <div class="float-right">右边的内容</div>  
    19.  
    20. </body>  
    21. </html>

  • 이 예에서는 두<div>요소는 다음을 통해 설정됩니다.float: left;그리고float: right;병렬 레이아웃을 구현했습니다.

  • 플로팅 효과

  • 문서 흐름 중단: 플로팅된 요소는 일반 문서 흐름에서 제외됩니다. 즉, 원래 차지했던 공간을 더 이상 차지하지 않으며, 다른 플로팅되지 않은 요소는 해당 존재를 무시하고 남겨진 공백을 채웁니다.

  • 후속 요소에 미치는 영향: 플로팅된 요소 뒤에 있는 플로팅되지 않은 요소는 플로팅된 요소가 남긴 공간을 채우려고 시도하지만 플로팅된 요소 자체는 후속 요소의 내용이나 테두리를 덮지 않습니다.

  • 클리어 플로트: 플로팅이 후속 레이아웃에 미치는 예측할 수 없는 영향을 피하기 위해 일반적으로 다음과 같은 플로팅을 지우는 방법을 사용해야 합니다.clear: both;속성, 의사 요소 지우기 또는 새로운 블록 수준 서식 지정 컨텍스트 생성(예:overflow: auto;또는display: flex;）。

요약하다

부동 소수점은 웹 개발에서 중요한 레이아웃 기술 중 하나이지만 일부 복잡성과 제한 사항도 있습니다. Flexbox 및 Grid와 같은 최신 CSS 레이아웃 기술의 출현으로 복잡한 레이아웃에서 부동 소수점의 적용이 점차 줄어들었지만 이전 브라우저와의 하위 호환성이 필요한 일부 간단한 시나리오나 프로젝트에서는 부동 소수점이 여전히 유용한 도구입니다.

앞으로도 관련 내용을 지속적으로 업데이트하고 공유하겠습니다.주의를 기울이는 것을 잊지 마세요!

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에서 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편