[CSS] float 레이아웃

Code/Web 2019. 1. 28. 20:44


    - 레이아웃 float

https://www.w3schools.com/css/css_float.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/float

    - 인접 내용들을 밀어내고 그 위에 떠있는 박스 생성
    - 레이아웃 설정에 쓰임

float: left; 왼쪽에 박스 위치
float: right;



//=======
* clear
https://developer.mozilla.org/ko/docs/Web/CSS/clear
    - float를 무력화, float와 같은 방향을 clear하면 float 박스 다음 줄에 출력됨

clear: left;
clear: right;
clear: both; /* 양쪽 모두에 적용 */


//===========
* overflow
https://developer.mozilla.org/ko/docs/Web/CSS/overflow
    - 내용이 블록보다 큰 경우 처리 방식 지정

overflow: visible; /* 내용이 잘리지 않음 */
overflow: hidden; /* 내용을 자르고, 스크롤 바를 보여주지 않음 */
overflow: scroll; /* 내용을 자르고, 스크롤 바도 보여줌. */
overflow: auto;/* 브라우저가 결정하게 함 */


반응형

'Code > Web' 카테고리의 다른 글

[CSS] position 속성  (0) 2019.01.30
[CSS] 정렬 방법  (0) 2019.01.28
[CSS] display (block, flex, grid)  (0) 2019.01.28
웹 아이콘 사용법 - Google Material, Font Awesome, glyphicons  (0) 2019.01.28
웹폰트 사용법  (0) 2019.01.27
Posted by codens