float를 사용하여 레이아웃을 지정하는 방법은 무엇입니까? 플로팅 레이아웃의 예

float를 사용하여 레이아웃을 지정하는 방법은 무엇입니까? 이 글에서는 float를 사용하여 콘텐츠를 레이아웃하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글에서【플로트란? float 속성에 대한 자세한 설명 ]float 속성이 무엇인지, 왜 float에 대해 알아야 하는지 등을 소개합니다. 관심이 있는 경우 참고할 수 있습니다. 플로팅 레이아웃의 예를 통해 콘텐츠가 어떻게 플로팅 레이아웃되는지 살펴보겠습니다.

1. 콘텐츠를 래핑하려면 float를 사용하세요.

html 코드:

<div class="demo">
	<h1>浮动--文字环绕</h1>
	<div class="box_left">向左浮动</div>
	<p>此文本位于浮动盒子（.box_left）之后的正常段落中。该段可以看作是浅绿色的盒子。请注意，此轮廓延伸 到浮动div的 后面。这很重要，因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动，以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充，则会产生影响。</p>
	<div class="box_right">向右浮动</div>
	<p>现在我们添加第二段并用内容充实它。你应该看到，一旦覆盖了div的高度，此段落文本将环绕它，以便文本不再缩进。类似的效果可在html通过设置来实现。</p>
	<p>float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置，只是他们“弱化”CSS和HTML的方式。在其他浏览器中，段落文本将与浮动的DIV对接。如果要在所有浏览器中填充，则需要为浮动元素指定边距。</p>
</div>

css 코드:

.demo {
	width: 520px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	padding: 10px;
	margin: 100px auto;
}

.box_left {
	float: left;
	margin-right: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

.box_right {
	float: right;
	margin-left: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

Rendering:

2. 'clear'를 사용하여 콘텐츠를 플로팅하세요. 에이 플로트를 사용하여 콘텐츠를 배치할 때 흔히 저지르는 실수는 클리어 추가를 잊어버리는 것입니다. 이는 플로팅된 콘텐츠 뒤에 있는 요소에 앞에 있는 플로팅된 콘텐츠의 영향을 받지 않도록 충분히 아래로 이동하라는 명령입니다.

요소가 위로 이동하는 문제는 float 요소 뒤에 있는 "일반" 콘텐츠가 요소를 지울 만큼 충분하지 않을 때 발생합니다.

이 경우 후속 섹션 제목이 적용되거나 콘텐츠가 페이지의 "콘텐츠" 섹션을 넘을 수도 있습니다. 이는 플로팅된 콘텐츠가 "문서 흐름에서 제거"되어 포함된 상자가 페이지에서 아래쪽으로 확장되도록 강제하지 않기 때문입니다.

다른 요소가 없을 때 컨테이너가 플로팅된 콘텐츠 주변으로 확장되도록 하는 가장 좋은 방법은 다음과 같이 클리어가 'both'로 설정된 빈 div를 삽입하는 것입니다.

<div style="clear: both;"></div>

위의 예를 수정해 보겠습니다.

	
浮动--文字环绕
	
向左浮动
	
此文本位于浮动盒子（.box_left）之后的正常段落中。该段可以看作是浅绿色的盒子。请注意，此轮廓延伸 到浮动div的 后面。这很重要，因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动，以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充，则会产生影响。
	
向右浮动
	
现在我们添加第二段并用内容充实它。你应该看到，一旦覆盖了div的高度，此段落文本将环绕它，以便文本不再缩进。类似的效果可在html通过设置来实现。
	<div style="clear: both;"></div>
	
float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置，只是他们“弱化”CSS和HTML的方式。在其他浏览器中，段落文本将与浮动的DIV对接。如果要在所有浏览器中填充，则需要为浮动元素指定边距。

렌더링:

3. 부동 소수점을 사용하여 콘텐츠를 열로 나눕니다.

html 코드:

<div class="demo">
	<div class="box_1">
		<p>第一列</p>
		<p>float的一个稍微不常见属性但有非常强大的用途，可以将内容分组为列。这可以通过将div向左浮动以形成左侧列，然后添加第二个div来完成，同时向左浮动以位于其旁边。每个DIV必须具有宽度，你可以向第一个DIV添加右边距以分隔列。在许多情况下，这使得TABLE元素的使用变得不必要。</p>
	</div>

	<div class="box_2">
		<p>第一列</p>
		<div style="width: 100px;height: 50px;border: 1px solid #000;"></div>
		<p>你可以看到此框中的内容与第一个段落相邻，并且与第一个示例不同，一旦清除了第一个浮点的高度，它就不会回绕。</p>
	</div>
	<div>使用这种布局，你必须记住在最后一个DIV之后添加一个清除，否则后续内容可以出现在两列中和周围。</div>
</div>

css 코드:

.demo {
	width: 800px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	padding: 10px;
	margin: 100px auto;
}

.box_1 {
	float: left;
	margin-right: 15px;
	width: 200px;
	height: 310px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

.box_2 {
	float: left;
	margin-left: 15px;
	width: 200px;
	height: 310px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

렌더링:

또한 설정에만 국한되지 않고 두 개의 열이 떠 있으며 페이지에 쉽게 3개 또는 4개가 있을 수 있습니다. 다른 옵션이 있습니다. 3열 레이아웃의 경우 div를 왼쪽과 오른쪽으로 띄우고 그 사이에 "일반" 콘텐츠를 표시할 수 있습니다.

4. 플로팅 "타일" 이미지 및 텍스트 사용

이제 단순해야 하지만 실제로는 매우 복잡한 것을 살펴보겠습니다. 작은 DIV가 많은 경우(예: 사진 갤러리의 사진) 모두 한쪽으로 옮겨 간단한 페이지를 만들 수 있습니다.

이 방법은 떠다니는 항목이 모두 같은 높이일 때 효과적입니다.

하지만 높이가 다르면 많은 문제가 발생합니다. "더 큰" 항목은 나중에 왼쪽으로 떠다니는 것을 방지하기 때문입니다. 항목:

참고: 다른 구성을 보려면 이 페이지를 새로고침하세요.

이 경우 가장 안전한 옵션은 레이아웃에 테이블을 사용하는 것입니다. 경우에 따라 매 n번째 요소에clear="left"를 삽입하여 이를 방지할 수 있지만 항목을 추가하거나 제거할 때 유지 관리가 어려울 수 있습니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 float를 사용하여 레이아웃을 지정하는 방법은 무엇입니까? 플로팅 레이아웃의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!