CSS 클리어를 영리하게 사용하는 방법: 부동 소수점을 모두 지우는 방법(코드 포함)

페이지 레이아웃을 할 때 float가 자주 사용되는데, float는 필연적으로 클리어가 됩니다. 이번 글에서는 능숙하게 사용하는 방법을 알려드리겠습니다. clear: 둘 다 클리어 float , 친구가 필요합니다. 참고하시면 되실텐데 도움이 되셨으면 좋겠습니다!

웹페이지를 생성하기 위해 div+css나 xhtml+css를 사용하면 레이아웃은 분명히 정확하지만 IE6에서 보면 전체 그림이 혼란스러운 경우가 있습니다. IE7이나 Firefox에서 보면 어떻게 계산해도 레이아웃을 수정할 수 없을 정도로 엉망이 됩니다. 사실 이 모든 것은 CSS에서 float인 float로 인해 발생합니다. 이 문제를 해결하려면 clean:both를 사용해야 합니다.

CSS 매뉴얼에서는 다음과 같이 설명합니다. 이 속성의 값은 부동 객체가 허용되지 않는 측면을 나타냅니다. 이 속성은 문서 스트림에서 float 속성의 물리적 위치를 제어하는 ​​데 사용됩니다.

속성을 float(float)으로 설정하면 물리적 위치가 문서 흐름에서 분리되지만, 대부분 문서 흐름에서 float(float)를 인식할 수 있기를 바랍니다. ), 또는 float(부동) 뒤에 있는 요소가 float(부동)의 영향을 받지 않기를 바랍니다. 이때 클리어하려면 둘 다 사용해야 합니다.

프로그램 코드:

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

플로트를 지울 필요가 없으면 3열의 텍스트가 1열 및 2열의 텍스트와 함께 표시되므로 세 번째 열에 있습니다. 명확한 부동 소수점을 추가하세요. 🎜#프로그램 코드#🎜 🎜#

.clear {
clear: both;
}

그런 다음

를 사용하여 구체적으로 "부동 소수점 삭제"를 수행합니다.

그러나 일부 사람들은

를 작성할 필요가 없으며 하위 레이어에서 직접 지우기만 하면 된다는 생각에 동의하지 않습니다.

예를 들어 원래는 좋았다

프로그램 코드

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>

통합해야 함

프로그램 코드

#🎜 🎜#

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<div class="clear"></div>
<p>这个是第3列。</p>

이 관점에서는

를 쓸 필요가 없습니다.

하지만 분명히 웹 디자인에는 여전히 매우 일반적인 상황이 있습니다.

Program code

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
<p style="clear:both;">第三段内容</p>

이 페이지는 IE에서 테스트되었습니다. 효과는 다음과 같습니다. 정확히 원하는 것입니다. 파란색 블록 안에는 빨간색과 노란색 콘텐츠로 구성된 두 가지 색상 블록이 있고, 파란색 블록 아래에는 텍스트의 세 번째 단락이 있습니다.

하지만 FF의 효과는 이렇지 않습니다. 작업을 완료하기 위해 다음 레이어를 지울 수는 없습니다. 플로팅 요소가 있는 레이블이 닫히기 전에 시간 내에 해당 레이어를 "지워야" 합니다.

프로그램 코드

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

IE 및 FF 높이 변경을 유발하는 추가된

다음 방법 해결 방법:

program code

clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

program code

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

위 내용은 CSS 클리어를 영리하게 사용하는 방법: 부동 소수점을 모두 지우는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!