찾다
웹 프론트엔드HTML 튜토리얼HTML에서 Clear는 무엇을 의미합니까?

HTML에서 클리어는 클리어를 의미합니다. 플로팅 요소에 대해 "clear: 속성 값"만 설정하면 됩니다. Clear 속성은 요소의 어느 면에 부동 요소가 허용되지 않는지 정의합니다. 여백 자체를 변경하지 않고 요소 여백 위에 빈 공간이 추가됩니다.

HTML에서 Clear는 무엇을 의미합니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS의 클리어 기능은 요소의 플로팅 효과를 지우는 것입니다.

CSS1 및 CSS2에서는 클리어 요소(예: 클리어 속성이 설정된 요소)에 상단 여백을 자동으로 추가하여 이를 수행합니다. CSS2.1에서는 요소의 위쪽 여백 위에 빈 공간이 추가되지만 여백 자체는 변경되지 않습니다.

어떤 변경이 이루어지더라도 최종 결과는 동일합니다. 왼쪽 또는 오른쪽 클리어로 선언되면 요소의 상단 외부 테두리는 해당 측면의 플로팅 요소의 하단 여백 바로 아래에 있게 됩니다.

clear 속성 값:

left 왼쪽에는 플로팅 요소가 허용되지 않습니다.

right 오른쪽에는 플로팅 요소가 허용되지 않습니다.

둘 다 왼쪽과 오른쪽에 떠 있는 요소를 허용하지 않습니다.

없음 기본값. 부동 요소가 양쪽에 표시되도록 허용합니다.

inherit는 Clear 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

예:

<html>
  <head>
    <style type="text/css">
      div {
        float: left;
        margin: 20px;
      }
      .three{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div>
      <img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   / alt="HTML에서 Clear는 무엇을 의미합니까?" >
    </div>
    <div>
      <img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   / alt="HTML에서 Clear는 무엇을 의미합니까?" >
    </div>
    <div class="three">
      <img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"   / alt="HTML에서 Clear는 무엇을 의미합니까?" >
    </div>
  </body>
</html>

효과:

HTML에서 Clear는 무엇을 의미합니까?

추천 학습: html 비디오 튜토리얼

위 내용은 HTML에서 Clear는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML 문서의 루트 태그는 무엇입니까?HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.

HTML 태그와 요소가 같은 것입니까?HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM

이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159

& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM

이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.

& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM

이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.

HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM

기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.

HTML의 다양한 형식 태그는 무엇입니까?HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.

'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.

HTML의 '클래스'속성은 무엇입니까?HTML의 '클래스'속성은 무엇입니까?Apr 28, 2025 pm 05:37 PM

이 기사는 스타일링 및 JavaScript 조작을위한 요소 그룹에서 HTML '클래스'속성의 역할을 고유 한 'ID'속성과 대조합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구