CSS에서 플로트를 지우는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 플로트를 지우는 방법

coldplay.xixi

Apr 16, 2021 pm 03:27 PM

css뜨다

CSS에서 부동 소수점을 지우는 방법은 부동 소수점을 지우는 클리어 속성을 사용하는 것입니다. 클리어 속성은 부동 요소를 가질 수 없는 요소를 정의합니다. 코드는 [img{float:left;clear:both; }].

CSS에서 플로트를 지우는 방법

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS에서 부동 소수점을 지우는 방법:

css는 클리어 속성을 사용하여 부동 소수점을 지울 수 있습니다. Clear 속성은 다음과 같이 소개됩니다.

clear 속성은 요소의 어느 쪽이 부동 요소를 가질 수 없는지 정의합니다. CSS1과 CSS2에서는 투명 요소(즉, 투명 속성이 설정된 요소)에 상단 여백을 자동으로 추가하여 이를 수행했습니다.

CSS2.1에서는 요소의 상단 여백 위에 여백이 추가되지만 여백 자체는 변경되지 않습니다. 변경에 관계없이 최종 결과는 동일합니다. 왼쪽 또는 오른쪽 지우기로 선언되면 요소의 위쪽 테두리는 해당 측면의 부동 요소의 아래쪽 여백 바로 아래에 있게 됩니다.

속성 값:

left 왼쪽에는 부동 요소가 허용되지 않습니다.
right 오른쪽에는 플로팅 요소를 사용할 수 없습니다.
둘 다 왼쪽과 오른쪽에 부동 요소를 허용하지 않습니다.
none 기본값입니다. 부동 요소가 양쪽에 표시되도록 허용합니다.
inherit는 Clear 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

clear 속성을 사용하여 부동 소수점 지우기 예:

이미지의 왼쪽과 오른쪽에 부동 요소는 허용되지 않습니다:

<html>
<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="/i/eg_smile.gif"  class="lazy"   / alt="CSS에서 플로트를 지우는 방법" >
<img  src="/static/imghwm/default1.png"  data-src="/i/eg_smile.gif"  class="lazy"   / alt="CSS에서 플로트를 지우는 방법" >
</body>
</html>

렌더링:

CSS에서 플로트를 지우는 방법

관련 튜토리얼 권장 사항: CSS 비디오 튜토리얼

위 내용은 CSS에서 플로트를 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS 포함 : 프로젝트에 적합한 방법을 선택합니다May 16, 2025 am 12:02 AM

TheBestMethodforincludingcssdependsonProjectSizeanDocplexity : 1) ForlargerProjects, useexternalcssforbettermainabilitableandableabilitable.2) ForsMallerProjects, 내부 CSSSSISSUITSIUT ABOIDEXTRAHTTPREQUESTS.ALWAYSIDERMANGERMANDIFIDANIDITION

불가능한 문제 해결May 15, 2025 am 10:32 AM

당신이 결코 생각하지 못한 다른 것으로 판명되는 불가능한 문제 중 하나를 문제 해결하는 것이 어떻게 보이는지.

@keyframes vs CSS 전환 : 차이점은 무엇입니까?May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity :@keyframesallowsfordeTailEdanimationsections, whilecsStransitsimplestateChanges.UsecsStransitionSforHovereffects likeToncolorChanges 및@keyframesforintricateanimationspinners.

정적 사이트 컨텐츠 관리에 페이지 CMS 사용May 13, 2025 am 09:24 AM

알고 있습니다. 컨텐츠 관리 시스템 옵션이 수많은 톤을 사용할 수 있으며, 여러 번 테스트했지만 실제로는 아무도 없었습니다. y ' 이상한 가격 책정 모델, 어려운 커스터마이즈, 일부는 전체가되었습니다.

HTML의 CSS 파일 연결에 대한 궁극적 인 안내서May 13, 2025 am 12:02 AM

HTML의 일부에서 요소를 사용하여 CSS 파일을 HTML에 연결하면 달성 할 수 있습니다. 1) 태그를 사용하여 로컬 CSS 파일을 연결하십시오. 2) 여러 개의 태그를 추가하여 여러 CSS 파일을 구현할 수 있습니다. 3) 외부 CSS 파일은 다음과 같은 절대 URL 링크를 사용합니다. 4) 파일 경로 및 CSS 파일로드 순서의 올바른 사용을 확인하고 성능을 최적화하면 CSS Preprocessor를 사용하여 파일을 병합 할 수 있습니다.

CSS Flexbox vs Grid : 포괄적 인 검토May 12, 2025 am 12:01 AM

Flexbox 또는 그리드 선택은 레이아웃 요구 사항에 따라 다릅니다. 1) Flexbox는 탐색 표시 줄과 같은 1 차원 레이아웃에 적합합니다. 2) 그리드는 매거진 레이아웃과 같은 2 차원 레이아웃에 적합합니다. 두 사람은 프로젝트에 사용하여 레이아웃 효과를 향상시킬 수 있습니다.

CSS 파일 포함 방법 : 방법 및 모범 사례May 11, 2025 am 12:02 AM

CSS 파일을 포함시키는 가장 좋은 방법은 태그를 사용하여 HTML 부분에 외부 CSS 파일을 소개하는 것입니다. 1. 태그를 사용하여 외부 CSS 파일을 소개합니다. 2. 작은 조정의 경우 인라인 CSS를 사용할 수 있지만주의해서 사용해야합니다. 3. 대규모 프로젝트는 SASS와 같은 CSS 전 처리기를 사용하여 @Import를 통해 다른 CSS 파일을 가져올 수 있습니다. 4. 성능의 경우 CSS 파일을 병합하고 CDN을 사용해야하고 CSSNANO와 같은 도구를 사용하여 압축해야합니다.

Flexbox vs Grid : 둘 다 배워야합니까?May 10, 2025 am 12:01 AM

예, YoushouldLearnbothflexBoxAndgrid.1) FlexBoxisIdealforone-Dimensional, FlexiblelayoutSlikenavigationMenus.2) GridexCelsIntwo-Dimensional, ComplexDesignsSuchasmagazinElayouts.3) 결합 된 BothenSlayoutFlexibility 및 HeartingFortructur

See all articles