CSS 클리어 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS 클리어 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-28 16:38:02

원래의

3136명이 탐색했습니다.

CSS Clear 속성은 부동 요소가 요소의 왼쪽이나 오른쪽에 나타날 수 없도록 지정합니다. 부동 소거를 구현하고 부동 레이아웃으로 인해 발생하는 일부 문제를 해결하는 데 사용할 수 있습니다.

CSS 클리어 속성을 사용하는 방법

CSS Clear 속성을 어떻게 사용하나요?

clear 속성은 요소의 어느 쪽이 다른 부동 요소를 허용하지 않는지 지정합니다.

구문:

clear:left|right|both|none|inherit;

로그인 후 복사

속성 값:

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

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

●　both: 왼쪽과 오른쪽에 플로팅 요소가 허용되지 않습니다.

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

●　inherit: Clear 속성의 값이 상위 요소에서 상속되도록 지정합니다.

설명:

clear 속성은 요소의 어느 쪽이 부동 요소를 가질 수 없는지 정의합니다. CSS1과 CSS2에서는 투명 요소(즉, 투명 속성이 설정된 요소)에 위쪽 여백을 자동으로 추가하여 이를 수행했습니다. CSS2.1에서는 요소의 위쪽 여백 위에 빈 공간이 추가되지만 여백 자체는 변경되지 않습니다.

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

참고: 모든 주요 브라우저는 명확한 속성을 지원합니다. IE8을 포함한 모든 Internet Explorer 버전에서는 속성 값 "inherit"가 지원되지 않습니다.

css 속성 지우기 예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
img
{
float:left;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="CSS 클리어 속성을 사용하는 방법" >
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
<br>
<p>使用clear:both清除浮动：</p>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="CSS 클리어 속성을 사용하는 방법" >
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. </p>
</body>
</html>

로그인 후 복사

렌더링:

CSS 클리어 속성을 사용하는 방법