프런트 엔드에서 float를 사용하는 방법은 무엇입니까? float 속성에 대한 자세한 설명

웹 페이지 레이아웃에서 우리는 종종 텍스트와 그림을 결합하는 효과를 접하게 되며 일부 그림과 텍스트가 혼합되는 경우가 있습니다. 실제로 텍스트 혼합은 웹사이트에서 많이 사용되며 그림 혼합을 구현하는 방법도 있습니다. , 따라 봅시다. float 속성을 설명해 볼까요? 플로트를 사용하는 방법은 무엇입니까?

1: float 속성

프론트엔드에서 많은 사람들이 float 속성을 사용하여 그래픽과 텍스트를 혼합하지만, 초보자들은 float 속성이 실제로 어떤 용도로 사용되는지 모릅니다. 두 개의 속성만 있습니다. 하나는 왼쪽입니다. 하나는 오른쪽입니다. 왼쪽은 요소가 왼쪽으로 부동한다는 것을 의미하고, 오른쪽은 요소가 오른쪽으로 부동한다는 것을 의미합니다. 일반적인 상황에서는 요소가 스스로 떠다니지 않습니다. [추천 학습: HTML5 온라인 매뉴얼
]

예:

 <title>CSS浮动float属性</title>
    <style type="text/css">
       img{float:left;}
       p{font-size:16px;text-indent:28px;}
    </style>

표시 효과는 다음과 같습니다.

하지만 주의깊은 독자라면 텍스트 상단과 그림이 수평 중앙에 있지 않다는 것을 알게 될 것입니다. 실제로, 이런 방식으로 브라우저에서는 p 태그가 기본 효과를 가집니다. 마치 우리가 강하게 볼 때 볼드하게 볼 수 있듯이 이미지와 텍스트의 일관성을 유지하려면 스타일을 제거해야 합니다. 브라우저,

2: 부동 속성을 사용하여 그림과 텍스트 사이의 간격을 설정하는 방법

텍스트가 그림을 둘러쌀 때 그림에 속성을 추가하는 한 텍스트와 일정한 거리가 있습니다.

<style type="text/css">
       img{margin-right:20px;margin-bottom:20px;float:left;}
    </style>

css에서는 float 속성이 매우 중요합니다. float를 사용할 때 전체 효과를 계획할 뿐만 아니라 일부 기본 정렬을 위해 div를 레이아웃할 때 float 효과를 자주 사용합니다.

위는 프런트 엔드에서 float를 사용하는 방법입니다. Html5 Tutorial에 대해 더 자세히 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 프런트 엔드에서 float를 사용하는 방법은 무엇입니까? float 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!