CSS의 명확한 요소에 대한 심층적인 이해

Clear: left; 왼쪽에 부동 요소가 있을 수 없음을 의미합니다.

명확함: 오른쪽에 부동 요소가 있을 수 없음을 의미합니다.
명확함: 둘 다 왼쪽과 오른쪽에 부동 요소가 있을 수 없음을 의미합니다.

하지만 사용할 때에는 CSS 우선순위 문제를 고려해야 합니다. 동일한 유형의 선택기로 지정된 스타일의 경우 스타일시트 파일의 나중 스타일이 더 높은 우선순위를 갖습니다.

　모든 요소의 클리어 속성을 오른쪽으로 설정한 경우 우선순위 문제로 인해 예상과 다릅니다. 오른쪽에 플로팅 요소가 없지만 오른쪽에 플로팅 요소가 나타납니다. 옆.

예를 들어 다음 코드는

<style>

.p1{height:40px;width:40px;background-color:red;position:releative;float:left;clear:right;
}.p2{height:40px;width:40px;background-color:green;position:relative;float:left;clear:right;
}.p3{height:40px;width:40px;background-color:yellow;position:relative;float:left;clear:right;
}.p4{height:40px;width:40px;background-color:black;position:relative;float:left;clear:right;
}.p5{height:40px;width:40px;background-color:blue;position:relative;float:left;clear:right;
}</style>



<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>

clear-right

여기서: 클래스 우선 순위 관계: p5>p4>p3>p2>p1

따라서 다음과 같은 상황이 나타납니다.

모든 요소의 클리어 속성이 왼쪽으로 설정된 경우 우선순위로 인해 예상과 다릅니다. 오른쪽에 플로팅 요소가 있을 수 있지만 오른쪽에는 플로팅 요소가 나타날 수 없습니다.

예를 들어 다음 코드는

<style>

.p1{height:40px;width:40px;background-color:red;position:releative;float:left;clear:left;
}.p2{height:40px;width:40px;background-color:green;position:relative;float:left;clear:left;
}.p3{height:40px;width:40px;background-color:yellow;position:relative;float:left;clear:left;
}.p4{height:40px;width:40px;background-color:black;position:relative;float:left;clear:left;
}.p5{height:40px;width:40px;background-color:blue;position:relative;float:left;clear:left;
}</style>



<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>

clear-left

여기서: 클래스 우선순위 관계: p5>p4>p3>p2>p1 .

그래서 아래와 같은 상황이 됩니다.

아직도 가끔 어지러울 때가 있어요. . 어쨌든 CSS 우선순위 문제를 이해하고 나면 이해하기 쉬울 것입니다.

위 내용은 CSS의 명확한 요소에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!