清除浮动的三种方法（推荐第三种）

最新推荐文章于 2021-07-05 19:54:28 发布
最新推荐文章于 2021-07-05 19:54:28 发布
阅读量418 收藏
点赞数
分类专栏： 知识总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49378755/article/details/107389077
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.contend{
				border: 1px solid black;
			}
			.box1,.box2,.box3{
				width: 100px;
				height: 100px;	
			}
			.box1{
				background-color: rgb(0,255,0);
				float:left;
			}
			.box2{
				background-color: rgb(255,0,0);
				float:left;
			}
			.box3{
				background-color: rgb(0,0,255);
				float:left;
			}
			.clear{
				clear:both;
			}
			
			
			.conter{
				border: 1px solid black;
				overflow: hidden;
				zoom: 1;   /* 设置让其兼容IE */
			}
			.box11,.box22,.box33{
				width: 100px;
				height: 100px;	
			}
			.box11{
				background-color: rgb(0,255,0);
				float:left;
			}
			.box22{
				background-color: rgb(255,0,0);
				float:left;
			}
			.box33{
				background-color: rgb(0,0,255);
				float:left;
			}
			
			
			
			.fu{
				border: 1px solid black;
			}
			.clearfix:after{
				content: "";
				height: 0;
				display: block;
				visibility: hidden;
				clear: both;
			}
			.clearfix{
				zoom: 1;   /* 设置让其兼容IE */
			}
			.zi1,.zi2,.zi3{
				width: 100px;
				height: 100px;	
			}
			.zi1{
				background-color: rgb(0,255,0);
				float:left;
			}
			.zi2{
				background-color: rgb(255,0,0);
				float:left;
			}
			.zi3{
				background-color: rgb(0,0,255);
				float:left;
			}
		</style>
	</head>
	<body>
		<!-- 第一种 -->
		<div class="contend">
			<div class="box1">第一种清除浮动的方法</div>
			<div class="box2">第一种清除浮动的方法</div>
			<div class="box3">第一种清除浮动的方法</div>
			<div class="clear"></div>
		</div>
		<hr/>
		
		<!-- 第二种 -->
		<div class="conter">
			<div class="box11">第二种清除浮动的方法</div>
			<div class="box22">第二种清除浮动的方法</div>
			<div class="box33">第二种清除浮动的方法</div>
		</div>
		<hr/>
		
		<!-- 第三种 -->
		<div class="fu clearfix">
			<div class="zi1">第三种清除浮动的方法</div>
			<div class="zi2">第三种清除浮动的方法</div>
			<div class="zi3">第三种清除浮动的方法</div>
		</div>
		
		
	</body>
</html>

在这里插入图片描述

遇见 - 怣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
清除浮动的三种方法
b72394610698113的博客
08-19 3068
在css中clear属性用于清除元素左右两侧浮动，常用属性值有 left (不允许左侧有浮动元素）right(不允许右侧有浮动元素）both (同时清除左右两侧浮动的影响) 注意: clear属性只能清除元素左右两侧浮动影响，但是在网页制作经常会遇到一些特殊的浮动影响。例如对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响(高度塌陷） 01，使用空标...
清除浮动的四种方法
A_home的博客
11-21 2909
浮动的元素会脱离标准流（文档流），浮动的盒子不再保留原先的位置，清除浮动的本质就是清除浮动元素带来的影响，策略——闭合浮动
CSS清除浮动float的三种方法小结
09-24
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结，感兴趣的朋友跟随脚本之家小编一起看看吧
清除浮动的三种实用方法
welcomejc2的博客
04-11 2170
清除浮动什么是浮动方法一：给父元素添加overflow属性方法二：在浮动元素后面添加一个带有clear属性的div新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UM...
清除浮动三种方法
苦涩精灵的博客
07-05 189
w3c推荐在父盒子的末尾添加一个div在其中清除浮动，如下： 正常没有清除浮动： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .f{ border: 1px solid black; } .box1{ float: left; height: 100px
清除浮动的几种方法
Huang_DW的博客
08-30 503
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 当我给内部两个盒子加上float属性的时候，底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 优点： 通俗易懂，书写方便。（不推荐使用） 缺点： 添
清除浮动的几种方法详解
09-24
3. **第三种方法：使用`overflow: auto`** 类似于`overflow: hidden`，`overflow: auto`也会创建新的块格式化上下文。不过，如果内容超过父元素的边界，它会显示滚动条。 ```css .box { overflow: auto; } ``` 4...
HTML清除浮动的其中两种方式
12-14
为了解决这个问题，有两种常见的清除浮动的方法。 一、给父元素设置高度（height） 这种方法是通过直接指定父元素的高度来确保它包含所有的浮动子元素。在提供的代码示例中，`.bigbox1`和`.bigbox2`是父元素，`....
前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法
qq_41363062的博客
01-05 1865
一、 background背景元素 1. background-color背景颜色 可以简写 background；默认值是transparent。（透明） 不能继承 2. background-image背景图片 可以简写background url（“图像的url路径地址”）图像的URL； none 表示背景上没有设置任何图像，这是默认值； inherit 指定背景图像应该从父元素继承 b...
CSS清除浮动的四种方法
晓晓涛的博客
12-23 1102
CSS清除浮动的四种方法第一种：使用div空标签法第二种：父元素使用overflow: hidden第三种：伪元素选择器:after第四种：伪元素选择器:before + after 第一种：使用div空标签法 <head> <style> .left, .right { float: left; width: 200px; height: 200px; background-color: blue; } .test { width: 500px;
清除浮动的3种方法
莱茵金属
11-15 1072
使用div+css布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。 常用的清除浮动的方法有以下三种。 此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。       *{margin:0;padding:0;}      body{font:36px bold; color:
清除浮动的三种方式
虚哥的技术备忘录
07-25 421
前言：刚学css的时候，元素浮动后样式的改变给我造成了很大的困扰，去网上找了清除浮动的方法也有很多，由于当时并不了解使用浮动（float）后元素会脱离文档流，所以都是不明所以的复制粘贴。随着学习的深入，对于浮动和清除浮动都有了一定的了解，在这里记录我常用清除浮动的三种方法。 在父元素外或内添加一个空的div，并添加css属性clear:both; 给父元素添加css属性overflow:hidde
常用的三种清除浮动方式
weixin_44595744的博客
10-20 580
div的常见三种清除浮动的方式 1.用父容器的高度来解决清除浮动问题 合理的创建标题，有助于目录的生成 直接输入1次#，并按下space后，将生成1级标题。 输入2次#，并按下space后，将生成2级标题。 以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。 如何改变文本的样式 强调文本 强调文本 加粗文本 加粗文本 标记文本 删除文本 引用文本 H2O is是液体。 21...
HTML 浮动
LxLzhz的博客
07-26 2003
HTML 浮动 浮动的定义： 浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框为止。 浮动框会脱离文档（ DOM ）流，（也就是浮动框会脱离原来的界面，浮动到原来界面的上方界面）父级元素会表现出浮动框不存在一样现象。 元素一旦浮动之后，后面的元素就会占据前面元素的位置 元素浮动之后 的确可以脱离文本文档流，所以就会有字围效果 浮动的特点： 浮动和清除浮动成对出现 清除浮动一般...
清除浮动的方法验证和总结
dayanwu2842的博客
06-07 387
css清除浮动影响的方法： 因为常用浮动布局 所以也常常要清除浮动的影响 什么是浮动的影响：当父元素内所有子元素都浮动，会产生2个影响 父元素高度塌陷，最后一个浮动的元素影响后面元素原本的文档流 总结8种清除浮动的方法（测试已通过iechromefirefoxopera，后面三种方法只做了解就可以了）： 1，父级div定义height <styletype=...
清除浮动的各种方法总结
dianzongfan5428的博客
06-14 5428
很多人都有研究闭合浮动元素的问题，但是解决方法却不一样，也并不是每一种方法都尽善尽美。闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 问题的提出： 最简单的一种情形就是我们把一个小的、固定宽度的div元素（比如导航、引用等）和其他元素内容一...
第一行div清除浮动没效果
最新发布
04-29
常见的清除浮动的方法有以下几种： 1. 使用空的div元素清除浮动： ```html ;"> ``` 这个方法简单易懂，但是会增加无意义的代码。 2. 使用伪元素清除浮动： ```css .clearfix::after { content: ""; display: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值