CSS 속성 종류 5_CSS
2021. 12. 15. 11:58ㆍksmart_html_css_js/css
728x90
float, clear
- 블럭요소 배치(레이아웃 배치) 할 때 쓰인다.
- float : 좌우 블럭요소 배치, 좌우 정렬 가능, 설정된 높이가 인식이 잘 안됨
적용 안된 대상들은 float 설정된 대상의 높이를 인식하지 못한다.
1) float 적용 대상은 넓이 높이가 설정이 안되어 있다면 컨텐츠의 크기 만큼만 설정된다.
- float 적용 대상의 부모 태그를 생성한다.
2) flot 적용된 자식요소에 의하여 상위태그는 높이를 인식하지 않는다.
1. clear : both; -> float 적용 해제
2. display : inline-block; 부모태그를 inline-block 변경
3. overflow : hidden; 부모 태그에 높이와 넓이를 설정하지 않고 사용
4, 부모 태그에 높이 설정
다음 오는 요소에 영향이 간다.
- clear : both float 전체해제 _이전 float 적용된 대상의
- overflow : hidden;
자식 요소의 컨텐츠가 부모의 넓이 및 높이의 크기를 넘어설 경우 컨텐츠 노출 방식 설정(스크롤, 감추기)
<style>
.box{width:100px;height:100px;border:1px solid #000;}
</style>
</head>
<body>
<style>
#containerWrap{}
</style>
<h2>float, clear</h2>
<div id="containerWrap">
<div class="Left-box box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
.box{float:left;}
728x90
'ksmart_html_css_js > css' 카테고리의 다른 글
| CSS 가상 선택자_CSS (0) | 2021.12.15 |
|---|---|
| CSS 속성 종류 _float_nav 만들기_CSS (0) | 2021.12.15 |
| CSS 속성 종류 4_CSS (0) | 2021.12.15 |
| CSS 속성종류 3_CSS (0) | 2021.12.15 |
| CSS 속성 종류2_CSS (0) | 2021.12.15 |