맑은 속성의 역할

블록 레벨 요소 분명 속성 값으로 설정 될 수있다 플로팅 효과를 취소하기 위해 사용 :

명확 : 맑은 부동의 좌우 양측
클리어 : 왼쪽 플로트에 분명 왼쪽
명확 : 바로 바로 플로트을 취소
명확 : 없음 효과 부동 남아 있지있다

차는 다른 플로트 제거 효과를 깨끗 플로트 새 광고 제공 재생성 효과 값을 제공한다는 것이다

데모 코드 :

<style>
        body{
            width: 500px;
            height: 400px;
            border: 1px solid #000;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: rgb(0, 255, 255);
            text-align: center;
            line-height: 100px;
            margin: 10px  10px;
            float: left;

        }

        .div2 {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(10, 200, 255);
            text-align: center;
            margin: 10px;
            float: left;
        }

        .div3 {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(90, 0, 255);
            text-align: center;
            margin: auto 10px;
            clear: left;
            float: right;

        }

        .div4 {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(0, 0, 255);
            text-align: center;
            margin: auto 10px;
            clear: right;
            float: left;
        }
    </style>
<body>
<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">C</div>
<div class="div4">D</div>
</body>

결과 :

그림 삽입 설명 여기

게시 39 개 원래 기사 · 원의 찬양 (13) · 전망 2326

추천

출처blog.csdn.net/qq_43205282/article/details/103387685