이 경우 float 속성을 사용하여 레이아웃을 만들 때 가장 일반적인 두 가지 문제에 대해 이야기하겠습니다..
CSS를 처음 접하는 사람들을 위해 Float은 DIV와 같은 요소를 정렬하여 웹 사이트 레이아웃을 만들 수있는 CSS 속성입니다. Float 값에는 Left, Right 및 None이 포함됩니다. Floats를 사용하여 요소를 정렬 할 수 있으며, 제대로 수행되면 동적 인 방식으로 수행 할 수 있습니다. 거의 유동적입니다..
이미지 갤러리를 만들어야한다고 가정 해 봅시다. 당신의 아이디어는 각 라인에 4 개의 이미지를 배치하는 것이지만, 첫 번째 이미지를 배치 한 후에 두 번째 이미지는 다음 라인으로 간다..
CSS 트릭 : CSS 문제 해결
과거에는 네거티브 값을 사용하여 이미지를 정렬하여 두 번째 이미지가 margin-left, right, top, bottom 속성을 사용하여 첫 번째 이미지 옆에 표시된다는 것을 인정했습니다. 나는 심지어 테이블을 사용하는 것을 고려했지만, 대신 음의 값을 사용하기로했다. 음수 여백 속성을 사용할 때 아무 문제가 없지만 float 사용과 같은 더 나은 솔루션이있는 경우에는 그렇지 않습니다..
이 이미지에 Float을 적용하면 한 행에 정렬되고 float 속성을 사용하여 더 많은 이미지를 계속 추가 할 수 있으므로 float 속성이 자동으로 정렬되기 때문에 라인 정렬 여부에 대해 걱정하지 않아도됩니다. 이 줄에 너무 많은 요소가 있음을 인식하고 이미지를 다음 줄로 푸시합니다..
그러나 당신이 당신의 웹 사이트 레이아웃을 위해 플로트를 사용한다면, 이미지뿐만 아니라 div도.
플로트와 관련하여 두 가지 주요 쟁점이 있습니다..
세 가지 요소가 있다고 가정 해 보겠습니다. 상위 1 (웹 사이트의 주 컨테이너), 하위 1 (왼쪽 탐색 모음) 및 하위 2 (콘텐츠 영역). Parent1은 메인 div 컨테이너이고, 왼쪽 네비게이션 영역과 오른쪽 컨텐트 영역을 갖는 것과 같이 child divs를 나란히 띄우는 것이 목표입니다. 위대한 소리.
parent1의 높이를 auto로 설정하고 child1 및 child2의 높이를 auto로 설정했습니다. 그러나 웹 페이지에서 상위 요소의 높이가 1 ~ 2 픽셀 밖에되지 않는 웹 페이지에서 열어 보게되면 하위 요소는 부모 컨테이너 위에 떠있는 것처럼 보이고 부모 컨테이너는 div를 인식하지 못하는 것처럼 보입니다 신장. (웹 사이트의 테스트 링크 1 참조).
걱정할 필요가 없습니다. 여기에 쉬운 해결책이 있습니다..
오버플로 추가 : 자동; 상위 컨테이너의 CSS에 대해 자동으로 float을 인식하고 높이가 증가하여 float가 원하는대로 상위 컨테이너의 일부로 표시됩니다. 와우 모든 것을 한 줄에.
그러나 Float 문제가 하나 더 있다는 것을 잊지 마십시오..
두 번째 문제는 부동 소수점과의 크로스 브라우저 호환성 문제이지만 여전히 중요합니다. 예 : 왼쪽으로 세 개의 이미지를 플로팅하려고 할 때 여백 속성을 사용하는 경우 부동 소수점 첫 번째 컨테이너가 Internet Explorer에서 여백을 두 배로 늘리는 경우가 있습니다.
Float Peekaboo 버그 / IE Float 배수가 큰 여백에 오신 것을 환영합니다..
당신이 엘리먼트를 플로팅 (Float)하려고 시도하고 어떤 종류의 마진을 사용한다면 IE의 마진을 두 배로 늘릴 것입니다..
괜찮은 해킹이있을 것이라고 확신하지만, CSS에서이를 해결할 수있는 쉬운 방법이 있습니다. 플로트 마진 살인자. 해당 컨테이너에 대한 CSS에서 표시 추가 : 인라인 왜 그런지 모르지만이 속성이 이중 여백 속성을 수정하는 것으로 보입니다..
그게 다야? 그래 그거야. 이제 float 사용을 시작할 수 있습니다..