CSS - float
float
길막 요소를 가진 Block element를 가로 배치를 위해 사용.
float 속성 적용시 길막을 못하는 block으로 변경. (실제 컨텐츠만큼 길, 자동으로 생기는 margin auto가 없어짐)
float된 요소는 보이진 않지만 블록 역할
가로배치는 쉽지만 레이아웃이 망가칠 수 있음.
float로 망가진 레이아웃을 고치는 법
- overflow: hidden;
parent에 overflow:hidden 속성을 주면 float 된 child를 찾을 수 있음
.parent{
overflow: hidden;
}
- clearfix 오로지 float으로 망가진 레이아웃을 고치기 위한 속성. pseudo element에 clear : 속성을 적용하여 고칠 수 있다. (block인 요소에만 사용 가능)
float : left
clear : left
float : right
clear : right
float : right
float : left
clear : both
.seudo ::after {
content: ''
display: block;
claer : left 또는 right 또는 both.
- pseudo element HTML에는 존재하지 않는 가상요소에 clear:left 적용
- Syntax
.클래스명 ::before {
content: '넣고 싶은 컨텐츠'
}
.클래스명 ::after {
content: '넣고 싶은 컨텐츠'
}
HTML
<div class="pseudo"> 1 </div>
<div class="pseudo"> 2 </div>
<div
CSS
.seudo ::before {
content: '가상'
}
.seudo ::after {
content: ''
display: block;
height: 15px;
background-color: red;
}
