CSS 클리어 플로트의 기능은 무엇인가요? 플로트 청소 방법(소개)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 클리어 플로트의 기능은 무엇인가요? 플로트 청소 방법(소개)

青灯夜游

Sep 17, 2018 am 11:21 AM

clearcssoverflow뜨다

프론트엔드 개발 과정에서 우리는 좋아하기도 하고 싫어하기도 하는 속성인 float를 자주 사용합니다. 플로팅을 통해 쉽게 레이아웃을 만들 수 있어서 좋고, 플로팅 후에 해결해야 할 문제가 너무 많아서 싫습니다. 이 장에서는 CSS에서 부동 소수점을 지우는 이유와 부동 소수점을 지우는 방법을 소개하고 요소가 부동 소수점을 제거한 후에 발생하는 문제와 CSS에서 부동 소수점을 제거하는 여러 가지 방법을 알려줍니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 왜 뜨나요?

플로팅(float)을 사용하는 가장 근본적인 이유는 텍스트 감싸기 효과를 얻기 위한 것입니다. 나중에 누군가는 이를 레이아웃에 사용하는 것이 꽤 좋으며 기존 레이아웃의 일부 결함을 보완할 수 있어 매우 편리하다는 것을 알게 되었습니다.

2. 왜 플로트를 지워야 하나요? CSS 클리어 플로트의 역할은 무엇인가요?

Float(부동)은 다른 부동 상자나 외부 가장자리에 있는 포함 상자를 만날 때까지 부동 상자를 왼쪽 및 오른쪽으로 이동하도록 제어할 수 있습니다. 플로팅 상자는 문서 흐름의 일반적인 흐름에 속하지 않습니다. 요소가 플로팅되면 블록 수준 요소의 레이아웃에 영향을 주지 않고 인라인 요소의 레이아웃에만 영향을 미칩니다. 이때 문서 흐름의 정상적인 흐름은 플로팅 박스에 동일한 레이아웃 모드가 없음을 보여줍니다. 컨테이너 박스의 높이가 플로팅 박스보다 작을 경우 "높이 붕괴"가 발생합니다: CSS 클리어 플로트의 기능은 무엇인가요? 플로트 청소 방법(소개)

위 그림에서 상위 요소의 높이는 패딩 효과이며, 상위 요소에는 높이가 설정되지 않았습니다.

상위 요소의 높이가 설정되지 않은 경우:

상위 요소의 하위 요소가 부동으로 설정되지 않은 경우 상위 요소의 높이가 자동으로 확장되고 높이 값이 나타납니다. ;
부모 요소의 자식 요소가 부동으로 설정된 경우 부모 요소의 높이는 자동으로 확장되지 않으며 높이 값도 없습니다.

이러한 방식으로 float를 설정한 후에 다음과 같은 몇 가지 문제가 있음은 분명합니다.

상위 요소의 여백이 영향을 받고 위쪽, 아래쪽, 왼쪽 및 오른쪽 가운데 맞춤을 달성할 수 없습니다.
부모 요소의 높이가 설정되지 않은 경우 플로팅 후 부모 요소의 여백 높이가 늘어나지 않으면 부모 요소가 디스플레이에 표시되지 않습니다.

예시 설명(배경색)

플로트가 지워지지 않음:

CSS 클리어 플로트의 기능은 무엇인가요? 플로트 청소 방법(소개)

플로트가 지워진 후:

CSS 클리어 플로트의 기능은 무엇인가요? 플로트 청소 방법(소개)

3. 플로트가 지워지지 않는 방법

다음은 CSS 삭제를 소개합니다. 부동 숫자 방법(위 그림의 효과를 얻으려면):

1. 명확한 속성이 있는 빈 요소를 사용하세요.

부동산을 지우려면 빈 레이블을 사용하세요. 상위 요소 내의 모든 부동 요소 뒤에 빈 레이블을 추가하세요. 제거해야 하는 항목(이론은 모든 태그일 수 있지만 일반적으로

및

에 사용됨) 부동 소수점을 지우고 CSS 코드clear:both를 정의합니다.

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
			}
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
			.clear{
				clear:both;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
			<div class="clear"></div>
		</div>
	</body>
</html>

장점: 간단하고 코드가 적으며 브라우저 호환성이 좋습니다.

단점: 의미 없는 HTML 요소를 많이 추가해야 하고, 코드가 충분히 우아하지 않으며, 나중에 유지 관리가 쉽지 않습니다.

2. CSS의 오버플로 속성을 사용하세요.

플로트를 지우려면 오버플로를 사용하세요. 플로트를 지워야 하는 요소에 CSS 코드 Overflow:auto 또는 Overflow:hidden을 정의하면 됩니다.

코드 예시:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
				overflow:hidden
			}
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

장점: 구조적, 의미적 문제가 없으며, 코드의 양이 매우 적습니다.

단점: 내용이 늘어나면 자동으로 줄바꿈이 되지 않아 내용이 엉키기 쉽습니다. 숨겨야 하고 오버플로되어야 하는 요소는 표시할 수 없습니다

3. CSS :after 의사 요소

를 사용하여 상위 요소에 :after 의사 요소를 사용하고 display:table

display를 설정합니다. :table 생성된 요소가 블록 수준 테이블에 표시되고 나머지 공간을 차지하도록 합니다.

콘텐츠를 통해 마지막 요소로 콘텐츠를 생성합니다: " ". 클래식 CSS는 콘텐츠가 "."일 수 있습니다.

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
				*zoom: 1;
			}
			.demo:after { 
				content: " ";
				display: table; 
				clear: both;  
			}  
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

단점: 최신 브라우저에 적합, IE6/7을 지원하지 않음, *zoom: 1은 IE6/7과 호환됨

위 내용은 CSS 클리어 플로트의 기능은 무엇인가요? 플로트 청소 방법(소개)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

使用C#中的Console.Clear函数清空控制台输出Nov 18, 2023 am 11:00 AM

使用C#中的Console.Clear函数清空控制台输出在C#的控制台应用程序中，我们经常需要清空控制台中的输出信息，以便于显示新的内容或者提供更好的用户体验。C#中提供了Console.Clear函数来实现这个功能，它能够清除控制台中的输出，让界面重新变为空白。Console.Clear函数的调用格式如下：Console.Clear();该函数无需输入任何

Linux下查看内存使用情况方法总结Feb 05, 2024 am 11:45 AM

Q：我有一个问题，我想要监视Linux系统的内存使用情况。在Linux下有哪些可用的视图或命令行工具可以使用呢？A：在Linux系统中，有多种方法可以监视内存使用情况。下面是一些通过视图工具或命令行来查看内存使用情况的方法。/proc/meminfo：最简单的方法是查看/proc/meminfo文件。这个虚拟文件会动态更新，并提供了关于内存使用情况的详细信息。它列出了各种内存指标，可以满足你对内存使用情况的大部分需求。另外，你还可以通过/proc//statm和/proc//status来查看进

揭秘NVIDIA大模型推理框架：TensorRT-LLMFeb 01, 2024 pm 05:24 PM

一、TensorRT-LLM的产品定位TensorRT-LLM是NVIDIA为大型语言模型（LLM）开发的可扩展推理方案。它基于TensorRT深度学习编译框架构建、编译和执行计算图，并借鉴了FastTransformer中高效的Kernels实现。此外，它还利用NCCL实现设备间的通信。开发者可以根据技术发展和需求差异，定制算子以满足特定需求，例如基于cutlass开发定制的GEMM。TensorRT-LLM是NVIDIA官方推理方案，致力于提供高性能并不断完善其实用性。TensorRT-LL

Linux 上的最佳白板应用程序Feb 05, 2024 pm 12:48 PM

“我们将介绍几款适用于Linux系统的白板应用程序，相信这些信息对您会非常有帮助。请继续阅读！”一般来说，数字白板是一种用于大型互动显示面板的工具，常见的设备类型包括平板电脑、大屏手机、触控笔记本和表面显示设备等。当教师使用白板时，您可以使用触控笔、手写笔、手指甚至鼠标在设备屏幕上进行绘画、书写或操作元素。这意味着您可以在白板上拖动、点击、删除和绘画，就像在纸上使用笔一样。然而，要实现这一切，需要有一款软件来支持这些功能，并实现触控和显示之间的精细协调。目前市面上有许多商业应用可以完成这项工作。

ZR币升值空间大吗? ZR币在哪里购买交易?Feb 01, 2024 pm 08:09 PM

ZRX（0x）是一个基于以太坊区块链的开放协议，用于实现分布式交易和去中心化交易所（DEX）功能。作为0x协议的原生代币，ZRX可用于支付交易费用、治理协议变更和获取平台优惠。1.ZRX币升值空间展望:从技术角度来看，ZRX作为0x协议的核心代币，在去中心化交易所的应用逐渐增多，市场对其认可度也在增加。以下是几个关键因素，有助于提升ZRX币的价值空间：市场需求潜力大、社区活跃度高、开发者生态繁荣等。这些因素共同促进了ZRX的广泛应用和使用，进而推动了其市场价格的上升。市场需求的增长潜力，意味着更

HTML、CSS和jQuery：制作一个带有浮动效果的按钮Oct 24, 2023 pm 12:09 PM

HTML、CSS和jQuery：制作一个带有浮动效果的按钮，需要具体代码示例引言：如今，网页设计已成为一种艺术形式，通过使用HTML、CSS和JavaScript等技术，我们能够为页面增加各种各样的特效和交互效果。本文将简要介绍如何用HTML、CSS和jQuery制作一个带有浮动效果的按钮，并提供具体的代码示例。一、HTML结构首先，我们需要在HTML文件中

BOSS直聘怎么创建多个简历Feb 05, 2024 pm 02:18 PM

BOSS直聘怎么创建多个简历？BOSS直聘是很多小伙伴找工作的一大招聘平台，为用户们提供了非常多便利的求职服务。各位在使用BOSS直聘的时候，可以创建多个不同的简历，以便投送到不同的工作岗位上，获取到更高成功率的求职操作，各位如果对此感兴趣的话，就随小编一起来看看BOSS直聘双简历创建教程吧。BOSS直聘怎么创建多个简历1.登录Boss直聘：在您的电脑或手机上，登录您的Boss直聘账户。2.进入简历管理：在Boss直聘首页，点击“简历管理”，进入简历管理页面。3.创建新简历：在简历管理页面，点击

手把手教你构建linux rootfsFeb 05, 2024 pm 03:51 PM

busybox概述众所周知，在Linux环境下，一切皆文件，文件可以表示一切。而文件系统则是这些普通组件的集合。在嵌入式领域中，常常使用基于busybox构建的rootfs来构建文件系统。busybox诞生至今已有近20年的历史，如今已成为嵌入式行业中主流的rootfs构建工具。busybox的代码是完全开源的。你可以进入官方网站，点击”GetBusyBox”下面的”DownloadSource”进入源码下载界面。“官方网站链接：https://busybox.net/”2.busybox的配置

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.