티스토리 뷰

CSS

Clear

placidcy 2022. 2. 4. 01:52

float 속성을 사용해서 이미지를 이동시킨후 문서의 텍스트 위치를 변경할때 사용한다

 

1. left: 이미지로부터 왼쪽 위치 설정 해제

2. right: 이미지로부터 오른쪽 위치 설정 해제

3. both: 양쪽 모두 해제

 

 


 
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <style>
        .container{
            border : 2px solid #111;
        }

        .container img {
            float : left;
        }

        .container .text {
            clear: both;
        }

    </style>
</head>
<body>
    <section id="container">
        <img src="download.jpg">
        This is the image file
        <div class="text">
            text text
        </div>
    </section>
    
</body>
</html>

결과

'CSS' 카테고리의 다른 글

Padding  (0) 2022.02.04
Margin  (0) 2022.02.04
float  (0) 2022.02.04
Flex 속성(컨테이너에 적용하는 속성)  (0) 2022.01.25
Display 속성  (0) 2022.01.20

UP NEXT : CSS

댓글
© 2018 webstoryboy