CSS에서는 float 속성을 사용하여 요소에 "float:left|right|none"만 설정하면 됩니다. 여기서 왼쪽은 왼쪽으로 부동하는 것을 의미하고 오른쪽은 오른쪽으로 부동하는 것을 의미합니다. 요소가 떠있지 않고 텍스트에 나타나는 위치에 나타남을 의미합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS의 float 속성을 통해 부동을 설정할 수 있습니다. float 속성은 요소가 부동하는 방향을 정의합니다. 역사적으로 이 속성은 항상 이미지에 적용되어 텍스트가 이미지 주위를 둘러싸도록 했지만 CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다.
float 속성:
교체되지 않은 부동 요소인 경우 명시적인 너비를 지정하세요. 그렇지 않으면 가능한 한 좁아집니다.
참고: 행에 부동 요소를 위한 공간이 거의 없으면 요소는 다음 행으로 이동하며 이 프로세스는 특정 행에 충분한 공간이 생길 때까지 계속됩니다.
float 속성의 가능한 값:
left 요소가 왼쪽으로 부동합니다.
오른쪽 요소는 오른쪽으로 이동합니다.
none 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.
css 부동 소수점 설정 예:
<html> <head> <style type="text/css"> img { float:right } </style> </head> <body> <p>在下面的段落中,我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p> <p> <img src="猫/images/1.jpg" style="max-width:90%"/ alt="CSS에서 부동 소수점을 설정하는 방법" > 这是一段文字。这是一段文字。这是一段文字。 这是一段文字。这是一段文字。这是一段文字。 这是一段文字。这是一段文字。这是一段文字。 这是一段文字。这是一段文字。这是一段文字。 这是一段文字。这是一段文字。这是一段文字。 这是一段文字。这是一段文字。这是一段文字。 这是一段文字。这是一段文字。这是一段文字。 </p> </body> </html>
실행 결과:
플로팅 상자는 외부 가장자리가 포함 상자나 다른 플로팅 상자의 테두리에 닿을 때까지 왼쪽이나 오른쪽으로 이동할 수 있습니다. 플로트 상자가 문서의 일반 흐름에 있지 않기 때문에 문서의 일반 흐름에 있는 블록 상자는 플로트 상자가 존재하지 않는 것처럼 동작합니다.
플로팅의 장점은 플로팅하여 3열 레이아웃을 형성하는 것, 텍스트 줄 바꿈 등의 레이아웃은 물론입니다. 그러나 플로팅에도 문제가 있습니다. 즉, 위 그림에서 볼 수 있듯이 상위 요소의 높이가 축소되고 플로팅 하위 요소가 래핑되지 않아 레이아웃 오류가 발생합니다.
추천 학습: css 비디오 튜토리얼
위 내용은 CSS에서 부동 소수점을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!