What does css clear float do? Methods to clean up floats (introduction)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What does css clear float do? Methods to clean up floats (introduction)

青灯夜游

Sep 17, 2018 am 11:21 AM

clearcssoverflowfloat

In the process of front-end development, we often use float, an attribute that we both love and hate. Love it because we can easily layout through floating; hate it because there are too many problems left to solve after floating. This chapter will introduce to you why CSS clears floats and how to clear floats; let you know the problems that will occur after elements are floated, as well as several ways to eliminate floats in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Why does it float?

The most fundamental reason for floating (float) is to achieve the text wrapping effect; later someone found that it is quite good to use it for layout, which can make up for some deficiencies in traditional layout. Very convenient.

2. Why do we need to clear floats? What is the role of css to clear floats?

Float (float) can control the floating box to move left and right until it encounters another floating box or the containing box on its outer edge. The floating box does not belong to the ordinary flow in the document flow. When the element is floated, it will not affect the layout of block-level elements, but will only affect the layout of inline elements. At this time, the normal flow in the document flow will show that the floating box does not have the same layout mode. When the height of the containing box is smaller than the floating box, "height collapse" will occur: What does css clear float do? Methods to clean up floats (introduction)

The height of the parent element in the above picture is the effect of padding, and the parent element is not set high.

When the height of the parent element is not set:

If the child element in the parent element is not set to float, the height of the parent element will also automatically If it is stretched, the height value will appear;
If the child element in the parent element is set to float, then the height of the parent element will not be automatically stretched, and there will be no height. value.

Obviously there are some problems after setting the float in this way, such as:

The margin of the parent element is affected and cannot be centered up, down, left, and right.
If the height of the parent element is not set and the height of the parent element is not expanded after floating, the parent element will not be displayed on the display.

Example description (background color)

Without clearing floats:

What does css clear float do? Methods to clean up floats (introduction)

After clearing floats:

What does css clear float do? Methods to clean up floats (introduction)

3. How to clear floats

The following introduces several ways to clear floats in css (Achieving the effect of the above picture):

1. Use an empty element with a clear attribute

Use an empty tag to clear the float: inside the parent element that needs to clear the float Add an empty tag after all floating elements (theoretically it can be any tag, but commonly used

and

) to clear the floating elements, and define the CSS code clear:both for them.

Code example:

<!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>

Advantages: simple, less code, good browser compatibility.

Disadvantages: A large number of unsemantic html elements need to be added, the code is not elegant enough, and it is not easy to maintain later.

2. Use the overflow property of CSS

Use overflow to clear floats: Just define the CSS code overflow:auto or overflow:hidden in the element where the float needs to be cleared. That is Can.

Code example:

<!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>

Advantages: There are no structural and semantic problems, and the amount of code is very small

Disadvantages: When the content increases, it is easy to cause automatic line wrapping, causing the content to be Hide it and cannot display the elements that need to overflow

3. Use CSS:after pseudo-element

Use the :after pseudo-element for the parent element and set display:table

display:table causes the generated elements to be displayed in a block-level table, occupying the remaining space.

Generate content as the last element through content: " ". As for what is in the content, it is OK. The classic CSS is content: ".". Some versions may have empty content.

Code example:

<!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>

Disadvantages: suitable for modern browsers, does not support IE6/7, *zoom: 1 is for compatibility with IE6/7

The above is the detailed content of What does css clear float do? Methods to clean up floats (introduction). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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文件中

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

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

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

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

See all articles