CSS에서 요소를 띄우는 데 사용되는 속성은 무엇입니까?
- 青灯夜游원래의
- 2021-03-22 10:56:034126검색
float 속성은 CSS에서 요소를 부동시키는 데 사용됩니다. float 속성은 요소가 부동하는 방향을 정의하는 데 사용됩니다. 요소가 float 속성을 사용한 후에 해당 요소는 표준 흐름 자체에서 분리되어 다른 요소 위에 부동할 수 있으므로 원래 속한 공간을 더 이상 차지하지 않습니다. 하지만 후속 요소가 위로 이동하여 원래 해당 요소에 속했던 공간을 차지하게 됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
float 속성은 CSS에서 요소를 부동시키는 데 사용됩니다.
css float 속성
float은 이름에서 알 수 있듯이 float입니다. float 속성이 설정된 요소는 속성 값에 따라 왼쪽이나 오른쪽으로 떠 있게 됩니다.
요소가 float 속성을 사용한 후에는 요소가 표준 흐름 자체에서 분리되어 다른 요소 위에 떠 있을 수 있으므로 원래 요소에 속한 공간을 더 이상 차지하지 않습니다. 이로 인해 후속 요소가 위로 이동하여 차지하게 됩니다. 원래 요소의 공간에 속한 공간입니다.
속성 값
left 요소가 왼쪽으로 부동합니다.
오른쪽 요소는 오른쪽으로 이동합니다.
none 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.
float 속성 이해
1. float 속성은 이 속성을 사용하는 요소 자체와 다음 요소에만 영향을 미칩니다(다음 요소는 위로 이동-> 바닥글 블록은 위로 이동).
2. 인라인 요소가 float 속성을 사용한 후에는 블록 수준 요소가 되며 요소의 높이와 너비를 설정할 수 있습니다(A 태그 참조).
3. float 속성은 일반적으로 다음 요소에 대한 float 속성의 영향을 지우기 위해 다음 태그의clear 속성과 함께 사용됩니다.
4. float 속성을 사용하는 요소의 경우 요소 너비가 설정되지 않으면 요소 너비가 콘텐츠 너비에 맞게 자동으로 조정됩니다. (콘텐츠 DIV 참조 - 콘텐츠 블록의 크기는 정의되지 않으므로 자동으로 조정됩니다.)
[추천 튜토리얼: CSS 비디오 튜토리얼]
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文网</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" style="max-width:90%" style="max-width:90%" / alt="CSS에서 요소를 띄우는 데 사용되는 속성은 무엇입니까?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>렌더링:
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS에서 요소를 띄우는 데 사용되는 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!