찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]

CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]

藏色散人
藏色散人원래의
2018-08-29 15:36:297193검색

페이지를 레이아웃할 때 CSS 부동 속성을 사용하는 경우가 많으며 이는 부동 속성이기도 합니다. 따라서 초보자의 경우 이 지식 포인트를 숙지해야 합니다. 그렇지 않으면 완전한 웹페이지를 완성하기 어려울 것입니다. 따라서 이 기사에서는 CSS float 속성의 구체적인 사용 방법을 자세히 소개합니다. 그것이 모두에게 도움이 되기를 바랍니다.

아래에서는 구체적인 코드 예시를 통해 자세히 소개하겠습니다

1. CSS 플로팅 속성-float 오른쪽 속성 코드 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css float right属性使用示例</title>
    <style>
    .demo{
    width: 500px;height: 400px;
    background-color: #b2ecef;
}
   img{
       width:100px;
       height: 100px;
       float: right;
   }
     </style>
</head>
<body>
<div class="demo">
    <img  src="/test/img/1.png" alt="CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]" >
    <img  src="/test/img/2.png" alt="CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]" >
</div>
</body>
</html>

위 코드에서는 float right가 있을 때 img 이미지 2개를 설정했습니다. 속성이 이미지에 추가되면 효과는 그림 1과 같습니다.

CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]

그런 다음 img 이미지에 float right 속성을 추가하면 효과는 그림 2와 같습니다.

CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]

I 그림 1과 그림 2에서 볼 수 있듯이 비교 결과 일부 변경 사항이 발견되었습니다. 그림 1에서 CSS 부동 속성이 설정되지 않은 경우 두 개의 img 이미지가 동일한 행에 왼쪽에서 오른쪽으로 표시되고 두 이미지 사이에 간격이 생깁니다. 그림 2에서 float right 속성을 추가한 후 두 img 요소가 부동하기 시작했고 오른쪽에서 왼쪽으로 간격 없이 표시되었습니다. 이때 공백이 필요하면 padding 속성을 사용해야 합니다. 따라서 css 부동 속성 float은 올바른 값을 설정하여 요소가 오른쪽으로 부동하도록 제어할 수 있다는 것을 알 수 있습니다.

2. CSS 부동 속성 - 부동 왼쪽 속성 코드 예시 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css float left属性使用示例</title>
    <style>
        .demo{
            width: 100px;height: 100px;
            background-color: #ccccff;
        }
        .demo1{
            float: left;
            width: 100px;height: 100px;
            background-color: #b2ecef;
        }
     </style>
</head>
<body>
<div class="demo">
</div>
<div class="demo1">
</div>
</body>
</html>

위 코드에서는 서로 다른 색상으로 표시되는 두 개의 div 블록을 설정했습니다. 부동 속성이 설정되지 않은 경우 효과는 다음과 같습니다. 그림 3:

CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]

그런 다음 부동 왼쪽 속성을 설정한 후 브라우저 액세스 후 효과는 그림 4와 같습니다.

CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]

그림 3과 그림 4를 비교하면 명확하게 알 수 있습니다. 데모1 요소가 왼쪽으로 떠 있는 것을 확인하세요. 마찬가지로, 두 요소 사이에 간격을 두고 싶다면 padding 속성을 통해 이를 달성할 수 있습니다.

요약하자면 CSS 부동 속성은 모든 요소가 왼쪽이나 오른쪽으로 부동하도록 제어할 수 있습니다. CSS float 속성은 이미지 부동을 제어하는 ​​것뿐만 아니라 텍스트 부동을 제어하는 ​​데에도 사용할 수 있습니다. [PHP 중국어 웹사이트 온라인 튜토리얼을 참고할 수 있습니다: CSS 0 기본 입문 튜토리얼 - CSS Float (Floating)]

이 글은 특정 참고 가치가 있으므로 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

위 내용은 CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php css Float padding
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS와 D3를 사용하여 작은 물고기가 수영하는 대화형 애니메이션을 구현하는 방법(코드 포함)다음 기사：CSS와 D3를 사용하여 작은 물고기가 수영하는 대화형 애니메이션을 구현하는 방법(코드 포함)

관련 기사

더보기