CSS의 float 사용법에 대한 자세한 소개

저는 오랫동안 float에 노출되어 있었습니다. 간단한 데모를 통해 이에 대해 이야기해 보겠습니다.

1: 페이지 레이아웃에서 두 개의 p가 있다고 가정하면 두 개의 p가 동일한 행에 있어야 합니다. 해결 방법 중 하나는 float를 사용하는 것입니다.

예:

<li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC dashed;">
                    <p class="g-position_a">职位简介</p>
                    <p class="g-position_b">
                        <dl class="g-position_list fl">
                            <dd>职位名称：php工程师</dd>
                            <dd>工作经验：1-3年</dd>
                            <dd>招聘人数：10人</dd>
                            <dd>最低学历：不限</dd>
                        </dl>

                        <dl class="g-position_list fr">
                            <dd>月薪：3000-5000元（个税计算）</dd>
                            <dd>年龄：不限</dd>
                        </dl>
                    </p>

 </li>

<p class="box" style="width:300px;height:300px;></p>

2: 위 코드에서 li의 두 p는 왼쪽과 오른쪽(out of of 문서 흐름), li는 "페이지 프리젠테이션" 높이를 가지므로 li의 위쪽 및 아래쪽 테두리가 겹치고, li 뒤에 클래스 이름 상자가 있는

p가 나타납니다.

현재 해결 방법은 두 개의 부동 하위 p 뒤에 부동 하위 p를 제거하는 p를 추가하는 것입니다. 이때 "내부 요소 확장"으로 인해 li의 높이가 페이지에 다시 나타납니다. 🎜>

예:아아앙

위의 진부한 CSS는 float의 사용법이 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 또한 PHP 중국어 웹사이트도 지원해 주시길 바랍니다.

CSS에서의 float 사용법에 대한 자세한 소개와 관련 글은 PHP 중국어 홈페이지를 참고해주세요!