[CSS] Float : left, right, inherit, none. > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

[CSS] Float : left, right, inherit, none. 정보

CSS [CSS] Float : left, right, inherit, none.

본문

안녕하세요~ 제 블로그에 쓴 글 공유해드릴게요!

 

CSS를 공부하는 입장에서 꼭 짚고 넘어가야 할 개념인 Float속성입니다.

 

float속성은 많이 어렵지도 않지만, 헷갈리는 개념이라 완벽히 이해가 되지 않았는데 글을 쓰며 공부를 하게 되었네요 ㅎㅎ

 

1. CSS의 Float 속성에 대한 개요


1-1. w3c에 의한 float속성의 정의


A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.


float는 같은 라인의 왼쪽 또는 오른쪽으로 shift되어 배치되는 박스의 일종이다.  

float("floated" or "floating" box)의 가장 재미있는 특징은 컨텐츠들이 float가 적용된 요소의 side에 위치하는 것이다. (clear 속성을 사용하지 않았을 때) 

컨텐츠는 왼쪽으로 float된 요소에는 오른쪽에, 오른쪽으로 float가 적용된 요소에는 왼쪽에 위치한다.

 

1-2. Float속성에 사용되는 값
float속성에 사용되는 값으로는 크게 4가지가 있다.

1. float:left : 부모 요소의 가장 좌측으로 위치 2. float:right : 부모 요소의 가장 우측으로 위치 3. float:inherit : 부모 요소의 Float속성을 상속 4. float:none : Float 속성을 제거 (Default이기 때문에 따로 지정해주지 않아도 됨)

2. Float 파헤치기

2-1. Float : none
<!DOCTYPE html> <html> <head> <style> .outside{width:1024px; height:300px; background:#1d4082} .inside1{width:300px; height:150px; background:green; color:white} .inside2{width:500px; height:150px; background:brown; color:white} </style> </head> <body> <div class="outside"> <div class="inside1">300px</div> <div class="inside2">500px</div> </div> </body> </html>

0bd2c753e67f9313422eb93d48ce5994_1496702842_4229.jpg

넓이가 1024px인 박스 안에 div를 2개 만들어 줍니다.(각각 가로 크기는 300px, 500px)
div는 BLOCK요소이기 때문에 옆으로 나란히 되는 것이 아니고 한 줄을 모두 차지하여 생성이 됩니다. 
이 형태가 Float : none (defalut)입니다. Float : none은 기본 값이기 때문에 선언하지 않아도 돼요!

 

2-2. Float : left
<!DOCTYPE html> <html> <head> <style> .outside{width:1024px; height:300px; background:#1d4082} .outside > div{float:left} .inside1{width:300px; height:150px;
추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT