/*float 프로퍼티는 주로 layout 을 구성하기 위해 사용되는 핵심 기술이다.
layout 의 가장 큰 목적은 1개 이상의 요소를 원하는 위치에 정렬시키는 것이다.*/
img {
float: left;
margin-right: 10px;
}
/*<body>*/
/*<img src="https://poiemaweb.com/img/doug.jpg"> */
/*<div>be bve be </div>*/
/*<body>*/
/*텍스트로 이미지 주위를 감싸는 형태*/
/*float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는
요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다.
float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute 를 사용하면 안된다.*/
/*프로퍼티값 Description*/
/*none 요소를 떠 있게 하지 않는다. (기본값)*/
/*right 요소를 오른쪽으로 이동시킨다*/
/*left 요소를 왼쪽으로 이동시킨다.*/
/*float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float:left; 프로퍼티를 사용하면 왼쪽부터 정렬,
float:right; 프로퍼티를 사용하면 오른쪽부터 정렬된다.이 경우, 먼저 기술된 요소가 가장 오른쪽에 출력*/
/*중앙 정렬은 margin 프로퍼티를 사용해야 한다.*/
div {
width: 960px;
margin: 0 auto;
}
div {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 50px;
margin: 0 10px;
padding: 10px;
}
.d1 {
float: left;
/*block 레벨 요소에 float 프로퍼티가 선언되면 width 가 inline 요소와 같이 content 에 맞게 최소화되고
다음 요소 위에 떠 있게(부유하게) 된다.*/
/*선언되지 않다면 d1 과 d2 가 width 의 기본값인 100%로 설정되어 가로를 꽉 채운 d1 이 출력되고 다음줄에
d2 가 출력된다.*/
background: red;
}
.d2 {
background: orange;
/*d1 클래스 요소에는 float: left;를 선언하였고 d2 클래스 요소에는 float 를 선언하지 않았다.
이때 d1 클래스 요소는 width 가 inline 요소와 같이 content 에 맞게 최소화되고 다음 요소인 d2 클래스 요소
위에 떠 있게(부유하게) 된다.*/
/*주의할 것은 d1 클래스 요소가 d2 클래스 요소 위에 떠 있게 되어도 d2 클래스 요소의 width 는 d1 클래스
요소가 차이한 width 만큼 줄어들지 않는다. d2 클래스 요소는 float 를 선언하지 않았기 때문에 본래의 width 를
유지한다. d2 클래스 요소가 본래의 width 를 유지한 상태에서 d1 클래스 요소가 그 위에 위치한다.*/
overflow: hidden;
/*d1 요소가 떠있어 margin 이 제대로 표현되지 않는 문제를 해결하기 위해 쓰이는 코드이다. */
/*자식 요소가 부모 요소의 영역보다 클 경우 넘치는 부분을 안보이게 해준다.*/
}
/*float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제가 발생
float 요소는 일반적인 흐름 상에 존재하지 않기 때문에 float 요소의 높이를 알 수 없기 때문인데 이 문제는부모 요소
이후에 위치하는 요소의 정렬에 문제를 발생시킨다.*/
/*부모요소가 출력된 후에 다른 요소를 출력했을 때 부모요소의 높이를 정확히 알지 못해 부모 요소가 짤릴 수 있음*/
/*해결방안
1. 부모요소에 overflow: hidden 을 추가한다.
2. 부모 요소에 float 프로퍼티를 부여하는 방법도 있다. 하지만 부모 요소의 너비는 float 된 두개의 자식요소의
콘텐츠를 표현할 수 있는 만큼만으로 작게 줄어들게 된다. 권장할 수 있는 방법은 아니다.
3. wrap 영역이 끝나기 직전 빈 요소를 만들고 clear:both 를 설정하는 방법 하지만 의미 없는 빈 요소를 사용하여야
하기 때문에 이 방법 역시 권장할 수 있는 방법은 아니다.
.clear {
height: 0;
clear: both;
}
이걸 부모요소가 끝나는 시점에서 추가해주는 것
4. ::after 가상 요소 선택자 이용
.clearfix:after {
content: "";
display: block;
clear: both;
}
<div class="wrap clearfix"> 이렇게 부모요소에 추가로 적어주는 방법
5. float 프로퍼티 대신 display: inline-block;을 선언하는 것이다. 주의해야야 점은 inline-block 프로퍼티
요소를 연속 사용하는 경우, 좌우에 정의하지 않은 space(4px)가 자동 지정되는 것이다. 이것을 회피 방법은
Fighting the Space Between Inline Block Elements 를 참조
*/