html5의 float 속성으로 인한 줄 바꿈을 처리하는 방법

h5 개발에서는 일부 레이아웃 문제를 해결하기 위해 부동 소수점 속성이 자주 사용됩니다. 그러나 일부 복잡한 레이아웃에서는 float 속성을 사용하면 행의 요소를 정렬할 수 없거나 float 요소가 래핑될 수 있습니다. 이런 종류의 문제가 발생하면 요소의 위치를 ​​수정하여 줄 바꿈이나 요소 정렬 문제를 해결할 수 있습니다.

<p class="container">
    <a href="address-manager.html">
        <i class="icon-home icon-large"></i>
        <p>修改收货地址</p>
        <i class="icon-angle-right icon-2x"></i>
    </a>
</p>

예를 들어 메뉴 같은 레이아웃을 작성하다 코드에서 오른쪽(오른쪽 화살표)으로 띄우고 싶은 요소를 조정하면 "주소 수정" 열에서 이런 현상이 발생했습니다. 첫 번째 요소 위치에 도달하면 부동 줄 바꿈 문제가 해결됩니다.
브라우저마다 스타일의 차이가 있기 때문에 오른쪽으로 떠있는 요소의 너비가 충분하지 않으면 줄 바꿈 문제가 발생하는 또 다른 상황이 있습니다. 이 경우 너비만 수정하면 해결됩니다.
다음은 정보 검색 과정에서 학습한 float 속성과 관련된 특징을 요약한 것입니다.
(1) Float는 CSS의 부동 위치 지정 속성입니다.
특징:
1. 플로트 상자는 바깥쪽 가장자리가 포함된 상자나 다른 플로팅 상자와 만날 때까지 왼쪽과 오른쪽으로 떠 있을 수 있습니다. 2. 플로팅 상자는 문서의 일반적인 흐름에서 벗어났으며 문서의 일반적인 흐름은 플로팅 상자의 존재를 무시합니다. 3. 플로팅 상자는 블록 수준 상자의 레이아웃에 영향을 미치지 않지만 인라인 상자의 배열에는 영향을 미칩니다. 4. 플로팅 상자의 높이가 포함 상자(즉, 상위 레이아웃)의 높이를 초과하는 경우 포함 상자는 다른 일반 흐름을 포함하지 않는 경우 높이를 자동으로 확장하지 않습니다. 포함 상자는 소위 높이 붕괴 현상인 0이 됩니다.
위의 상황은 실제로 인라인 상자에 영향을 미치는 플로팅 상자의 징후입니다.

위 내용은 html5의 float 속성으로 인한 줄 바꿈을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!