티스토리 뷰

CSS

float

placidcy 2022. 2. 4. 01:30

웹 페이지에서 이미지를 띄우는 방법과 텍스트를 어떻게 같이 배치할 것인지를 설정한다

 

1. inherit : 부모 요소에서 상속

2. left : 왼쪽에 블록 박스 생성, 페이지 텍스트는 오른쪽에 위치한다

3. right : 오른쪽에 블록 박스 생성, 페이지 텍스트는 왼쪽에 위치한다

4. none : 요소를 설정하지 않는다

 

- left와 right 값 설정 시 display 속성은 무시된다, clear 속성이 있을때 페이지 흐름이 달라진다

 

 

 


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

        .container img {
            float : left;
        }

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

결과

'CSS' 카테고리의 다른 글

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

UP NEXT : CSS

댓글
© 2018 webstoryboy