CSS 플로팅은 항상 우울한 문제였습니다. 특히 플로팅 열이 많은 경우에는 많은 레이아웃 문제가 발생합니다. 그러나 실제로 여러 열을 마주하는 2열 구조의 플로팅을 이해하면 됩니다. 2열 구조의 좌우 플로팅이 가장 기본적인 플로팅이고, 3열, 4열 등의 플로팅도 모두 이를 기반으로 하기 때문에 더 이상 플로팅할 때 당황하지 않아도 됩니다. .
몇 가지 일반적인 CSS 2열 부동 소수점을 살펴보겠습니다. CSS 코드는 다음 범주에서 찾을 수 있습니다.
왼쪽은 고정 너비, 오른쪽은 가변형:
#a{float:left width:200px background:#aaa;}
#b{Background:#f00;}
왼쪽에 고정 너비가 필요하고 오른쪽에 자동 너비가 필요한 경우 a 객체가 왼쪽으로 부동하도록 설정하면 기본적으로 b 객체는 화면의 전체 너비를 차지하지만, a는 플로팅 상태로 남아 200PX의 너비를 차지하므로 b 객체는 자동으로 a 뒤에 위치하게 됩니다.
물론 여기에는 문제가 있습니다. 즉, 왼쪽의 내용이 오른쪽보다 높을 경우 오른쪽의 높이가 그에 맞게 증가할 수 없고, 오른쪽의 내용이 오른쪽보다 높을 경우에 발생합니다. 왼쪽의 콘텐츠는 그에 따라 오른쪽의 높이가 증가하지 않습니다.
이 문제를 해결하는 한 가지 방법은 b에 float를 설정하는 것입니다. 물론 올바른 float로 설정하면 오른쪽의 내용이 다음보다 작을 때 올바른 float가 설정되지 않습니다. 한 줄의 너비, 왼쪽과 오른쪽 중간에 공백이 나타납니다:
#a{float:left width:200px background:#aaa;}
#b; 배경:#f00;
float:right;}
b를 왼쪽 부동으로 설정하면 중간에 공백이 생기는 문제를 해결할 수 있습니다. 하지만 마찬가지로 b 객체의 내용이 너비에 비해 충분하지 않은 경우에도 마찬가지입니다. 한 줄이면 오른쪽에 공백이 나타납니다:
#a{float:left width:200px background:#aaa;}
#b{Background:#f00;
float:left;}
물론 양쪽 끝이 있는 또 다른 솔루션이 있습니다. 즉, b 객체의 위치를 왼쪽에서 설정하는 것입니다. 이는 부동의 목적을 달성하고 문제도 해결할 수 있습니다. a로 흐르는 b 객체의 많은 콘텐츠. 객체 아래의 질문:
#a{float:left width:200px background:#aaa;}
#b{Background:#f00;
margin-left:200px;}
오른쪽은 너비 고정, 왼쪽은 자동:
왼쪽은 너비 고정, 오른쪽은 자동, 오른쪽은 너비 고정과 동일한 원리 왼쪽에도 자동을 설정할 수 있습니다. ：
#a{배경:#f00; margin-left:200px;}
#b{float:right:200px;
background:#aaa;}
위 코드를 따라가면 이 코드는 오른쪽 플로팅을 구현할 수 없다는 것을 알 수 있습니다. b 개체는 a 개체 아래에 표시되며 예상대로 오른쪽으로 표시되지 않습니다. 넓은 왼쪽 및 자동 효과. HTML 구조로 인해 부동 DIV는 부동 DIV 앞에 나타나야 합니다. 즉, 위 코드를 따르면 물론 CSS 스타일을 사용하여 HTML 구조를 변경하지 않고도 부동 순서를 조정할 수도 있습니다. 또한 CSS의 장점 중 하나입니다. 즉, 원래 HTML 구조를 변경하지 않고도 페이지를 수정할 수 있습니다. #a{float:left width:200px background:#aaa;} 위 내용은 CSS 레이아웃의 플로팅 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
#b{배경:#f00;
margin-left:200px;}
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
