float가div 너비에 미치는 영향
우선div의 기본 너비는 width:auto입니다.폭을 자동으로 조절한다는 뜻이다.플로트가 없는 상황에서div의 폭은 자동으로 최대화되고, 플로트가 있는 상황에서는 정반대로 최소화된다.테스트는 다음과 같습니다.
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left;">sss</div>이거는clear를 위한 설정일 수도 있어요.
두 번째 div의 기본 높이도 Height:auto입니다.float가 있는div는 모두 같고, 모두 자동으로 최소화됩니다
셋째div가float를 가지고 있을 때 웹 페이지의 넓이를 초과하지 않으면 다른 요소는div를 포함하여 모두 그것을 둘러싸야 한다.또는 이 때 플로트가 있는div는 다음과 같은 특수한 패딩 테스트라고 생각할 수 있다.
4
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left; width:100%;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#0099FF;">sss</div>
<div style="background-color:#ff0000; float:left; width:100px; height:50px;">sss</div>
ssssssssssssss<br />sssssssssssssssss<br/> ssssssssssssss좌우로 갈라진 웹 페이지는 왼쪽의 넓이가 고정되고 오른쪽의 넓이는 해상도에 따라 자동으로 적응하며 오른쪽의 공간을 가득 채운다.
방법은 왼쪽div를 플로트:left로 하는 거예요.오른쪽의div는float가 없습니다.이렇게 하면 이 효과를 실현할 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
🧙🏼 HTML 구조를 나타내는 요소: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 인라인 컨테이너 : 인라인 레벨 요소 🌵 span (인라인 요소) vs div(블록 요소) ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
