왼쪽 서스펜션 : float:left;
오른쪽 서스펜션 : float:right;
플로트 사용은 상당히 넓습니다. 여기에서는 컬렉션의 일반적인 사용법을 간단히 소개합니다.
자식 요소가 중단되면 상위 요소가 높이에서 붕괴됩니다. 이 부분에는 서스펜션을 청소하는 것이 포함됩니다. 다음 장에서는 서스펜션을 청소한다는 설명을 언급 할 것입니다.
그래서 요점으로 돌아가서
첫 번째 현상 플로트 = 인라인 블록서스펜션은 4 개의 블록이 인라인 블록 모드가되는 스타일입니다. 아래 그림과 같이.
<style> div {너비 : 200px; 높이 : 200px; 배경색 : 핑크; 국경 : 1px 솔리드 블랙; 플로트 : 왼쪽; } </style><body> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>두 번째 현상 :
아래 그림과 같이, 첫 번째 그림이 매달려 있으므로 두 번째 블록 요소는 첫 번째 블록 요소 아래에 표시됩니다.
그러나 후자의 요소는 네 번째 블록 요소와 같은 이전 요소로 교차하지 않지만 세 번째 요소는 매달리지 않습니다. 네 번째 시즌 블록 요소는 원래 위치에 남아 있습니다.
<tyle> .first-one {float : 왼쪽; 배경색 : 녹색; }. }. 세 번째 {배경색 : 파란색; } .fourth-One {float : 왼쪽; 배경색 : 회색; } div {너비 : 200px; 높이 : 200px; 배경색 : 핑크; 국경 : 1px 솔리드 블랙; 글꼴 크기 : 30px; } </style><body> <div class = first-one> </div> <div class = second-one> </div> <div class = third-one> </div> <div class = fourth-one> </div> <div class = fourth-one> </div> </body>세 번째 현상 :
모든 요소가 떠오르고 부모 요소의 나머지 너비가 해당 행의 자식 요소의 배열을 지원하기에 충분하지 않으면 상단 레벨에 연결됩니다.
이 기사는 https://segmentfault.com/a/1190000022669455에서 재현됩니다
요약이것은 HTML 플로팅 플로어 사용에 대한 간단한 분석에 대한이 기사의 끝입니다. 관련 HTML 플로팅 플로트 콘텐츠는 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!