CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]
- 藏色散人원래의
- 2018-08-29 15:36:297025검색
페이지를 레이아웃할 때 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 사용에 대한 자세한 설명 [코드 예]](https://img.php.cn//upload/image/263/674/666/1535526309154409.png "1535526309154409.png")
그런 다음 img 이미지에 float right 속성을 추가하면 효과는 그림 2와 같습니다.
![CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]](https://img.php.cn//upload/image/585/377/962/1535526355138310.png "1535526355138310.png")
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 사용에 대한 자세한 설명 [코드 예]](https://img.php.cn//upload/image/149/918/819/1535527044234495.png "1535527044234495.png")
그런 다음 부동 왼쪽 속성을 설정한 후 브라우저 액세스 후 효과는 그림 4와 같습니다.
![CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]](https://img.php.cn//upload/image/745/504/660/1535527094464643.png "1535527094464643.png")
그림 3과 그림 4를 비교하면 명확하게 알 수 있습니다. 데모1 요소가 왼쪽으로 떠 있는 것을 확인하세요. 마찬가지로, 두 요소 사이에 간격을 두고 싶다면 padding 속성을 통해 이를 달성할 수 있습니다.
요약하자면 CSS 부동 속성은 모든 요소가 왼쪽이나 오른쪽으로 부동하도록 제어할 수 있습니다. CSS float 속성은 이미지 부동을 제어하는 것뿐만 아니라 텍스트 부동을 제어하는 데에도 사용할 수 있습니다. [PHP 중국어 웹사이트 온라인 튜토리얼을 참고할 수 있습니다: CSS 0 기본 입문 튜토리얼 - CSS Float (Floating)]
이 글은 특정 참고 가치가 있으므로 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
위 내용은 CSS의 부동 속성 float 사용에 대한 자세한 설명 [코드 예]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!