[ float 속성 ]
float 속성은 본래 이미지 태그와 글단락이 같이 있을 때 한 줄에 같이 나오기 위해 주로 사용되었는데
그뿐만 아니라 레이아웃을 잡을때도 많이 이용되게 되었다. 하지만 최근에는 flex가 도입되면서 점차 float를 이용한
레이아웃을 잡는 방식은 줄어들고 있는 추세이다.
float:left
float:right
처럼 사용해서 태그가 배치될 위치를 지정하게 된다.
아래의 예제에서는 본래 이미지 태그와 p태그는 block 속성에 의해 이미지 태그가 오고 그 아래에 문단 태그가 와야 정상이지만
이미지에 float:right를 줌으로서 img는 오른쪽으로 배치가 되고 문단이 왼쪽으로 배치되었다.
하지만 그 이후에 또 나오는 p태그(id="clearAdjustP")의 경우는 이러한 float의 영향을 배제시키고 싶기 때문에
float를 해제하는 clear 속성을 이용해서 clear:both해주면 float:left든 float:right든 다 해제한다는 의미가 되기 때문에
정상적으로 이미지 태그 아래에 출력되게 되는 것을 알 수 있다.
float로 만든 Holy Grail Layout이다.
하지만... Flex가 더 유연함으로 FLex로 만드는 것을 권장한다...
'개발 > css' 카테고리의 다른 글
CSS로 일정 길이 이상일 때 텍스트 줄임말 ...로 표시하기/일정 길이 이상이면 자동 개행처리하기 (1) | 2017.06.16 |
---|---|
반응형 웹의 핵심 media Query (0) | 2017.06.04 |
화면의 Layout을 그리는 Flex에 대하여... (0) | 2017.06.04 |
position offset에 대해서... (0) | 2017.06.03 |
layout 관련 속성 (0) | 2017.06.03 |