집 > 기사 > 웹 프론트엔드 > CSS에서 부동 요소 줄 바꿈을 구현하는 방법

CSS에서 부동 요소 줄 바꿈을 구현하는 방법

이 글은 CSS에서 플로팅 요소 줄 바꿈을 구현하는 방법을 소개합니다. 필요한 참고 자료가 있으면 도움이 될 것입니다.

이런 레이아웃 효과를 만들고 싶을 때

보라색 박스 안의 내용은 이러합니다

리스트입니다

li 요소는 블록 레벨 요소이고, 기본 크기는 상위 요소입니다. ul 너비와 줄 바꿈

li에 배경이 없으면 걱정하지 마세요

하지만 문제는 배경뿐만 아니라 적응형 너비와 높이도 있다는 것입니다. 텍스트 기반

이것은 인라인 블록 유형의 기능입니다

그래서 li을 인라인 블록으로 만들고 싶다면 float를 설정하여 눈에 보이지 않는 변경을 하세요

하지만 float하면 문제가 발생하지 않습니다. 또 왔어요

괜찮습니다. li folat:left를 입력한 다음 clean:both를 지정하여 float를 삭제하세요

float를 삭제하는 데는 총 4가지 속성이 있습니다

clear:both|left|right|none;

다 테스트해봤습니다

먼저 box1은 rightclear:right 같은 줄에 있지 않는 목적을 달성하기 위한 권리

흠 왜 원하는 효과를 얻지 못했나요? ?

그런 다음 두 번째 요소 box2를clear:left;로 설정하고 결과를 살펴보겠습니다

box1 box2는 같은 행에 있지 않으며 목적은 달성되었습니다.

그렇다면 왜 그렇지 않습니까? box1에 Clear:right를 설정하는 것이 좋습니다

box1은 오른쪽에 떠 있는 요소가 없도록 위치만 변경할 수 있기 때문에

삶과 마찬가지로 다른 사람을 바꿀 수는 없지만 자신은 바꿀 수 있습니다

하지만 box1의 위치가 바뀌더라도 box2는 여전히 밀접하게 따라옵니다. box1이 있는 것은 플로팅 요소가 문서 흐름에서 벗어났기 때문입니다

그리고 문서 흐름에서 벗어난 요소는 특수한 요소가 되었기 때문에 찾아야 합니다. 인라인 블록 유형

너비와 높이가 있고 줄 바꿈이 없습니다. 인라인과 블록 기능의 조합은 굉장합니다

여기서 box1 올바른 플로트가 지워지더라도 box2는 여전히 이를 따릅니다. 최종 결과는 box1입니다. box2 box3은 그대로 유지됩니다. 한 줄

ps. 아마도 box1은 다음 줄로 실행되고 box2와 box3은 움직이지 않을 것이라고 생각할 것입니다. Float는 float:none이 아니며 모두 부동 상태입니다

, box1, box2, box3이 순차적으로 생성되는데 왜 내앞에 포지셔닝을 하고 있는걸까요? ? 맹목적으로 달렸는데

box2가 왼쪽 플로트를 지우고 줄 바꿈으로 위치를 바꿨습니다

순서는 여전히 같습니다. box1 box2 box 3

box3이 box2를 따릅니다. 전에 말한 내용을 확인했습니다

이러한 이해를 통해 Floating Cognition에 대한 더 깊은 이해

그래서 래핑해야 할 모든 요소를 Clear:both

전혀 문제 없습니다

왼쪽에서 작동하지 않으면 오른쪽에서도 작동하지 않습니다. , 그리고 오른쪽에서도 작동하지 않으면 다음 요소에 의존하세요

관련 기사