CSS는 플로트 란 무엇입니까?
- 青灯夜游원래의
- 2021-04-02 17:17:442039검색
CSS에서 플로팅은 문서 흐름에서 요소를 가져오는 방법으로, 플로트 값에 따라 요소를 왼쪽이나 오른쪽으로 이동하고, 그 주변의 요소도 바깥쪽 가장자리에 닿을 때까지 재배열됩니다. 포함하는 상자 또는 다른 부동 상자의 테두리.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
플로팅은 문서의 흐름에서 요소를 가져와 왼쪽이나 오른쪽으로 이동하고 주변 요소를 재정렬하는 방법입니다.
플로팅의 의미: 플로팅 속성이 설정된 요소는 일반 표준 흐름의 제어에서 벗어나 상위 요소에 지정된 위치로 이동하며 블록 수준 요소를 한 줄에 넣으면 플로팅이 해제됩니다. 플로팅은 위아래가 아닌 왼쪽과 오른쪽에만 영향을 미칩니다.
플로팅은 페이지의 개체가 앞뒤로 흐르는 순서를 변경할 수 있는 매우 유용한 레이아웃 방법입니다. 콘텐츠의 레이아웃을 단순하게 만들고 확장성이 좋다는 장점이 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 영상 튜토리얼)
플로팅 요소의 특징:
1플로팅 요소는 표준 문서 흐름에서 벗어나 블록 수준 요소의 제한을 제거합니다. 및 인라인 요소
2. 플로팅 요소는 서로 달라붙는 효과가 있습니다. 너비가 충분하지 않으면 자동 줄 바꿈이 발생합니다.
3. 플로팅 요소는 표준 문서 흐름에서 분리되지만 분리되지는 않습니다.
플로팅으로 인한 결과:
(1) 플로팅 요소가 문서 흐름에서 벗어났기 때문에 상위 요소의 높이를 확장할 수 없으며, 상위 요소의 높이가 확장될 수 없습니다. 상위 요소와 동일한 레벨
(2) 플로팅 요소와 동일한 레벨 플로팅 요소가 문서 흐름에서 벗어나 원래 위치를 차지하지 않기 때문에 비플로팅 요소가 따릅니다
(3) 플로팅 요소가 있는 경우 요소는 첫 번째 부동 요소가 아니며 그 이전의 요소도 부동되어야 합니다. 그렇지 않으면 페이지에 쉽게 영향을 미칠 수 있습니다. 구조에
이 표시되므로 부동을 지워야 합니다. 그렇다면 어떻게 플로트를 클리어할 수 있을까요? 추천 읽기 "CSS에서 부동 소수점을 지우는 방법은 무엇입니까? 3가지 방법 소개 》
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS는 플로트 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!