CSS---清除浮动的方法

最新推荐文章于 2021-08-09 12:08:56 发布
最新推荐文章于 2021-08-09 12:08:56 发布
阅读量82 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43766304/article/details/104757619
版权

写给自己：包含三种方法，在代码注释中

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---清除浮动的方法</title>
	<style type="text/css">
		.list{
			width: 250px;
			/* height: 400px; 浮动时：如果不给高度会出现问题*/
			border: 1px solid #00FFFF;
			margin: 50px auto 0;
			list-style: none;/* 去掉小圆点 */
			padding: 0;
			/* overflow: hidden;  第一种 清除浮动的方法 */
		}
		.list li{
			width: 100px;
			height: 50px;
			background-color: gold;
			margin: 10px;
			float: left;
		}
		/* 解决margin-top塌陷的问题
		.clearfix:before{
			content: "";
			display: table;
		} */
/* 		第三种清除浮动的第三种方法
		.clearfix:after{
			content: "";
			display: table;
			clear:both ;
			
		} */
		/* 兼容性写法 */
		.clearfix:before,.clearfix:after{
			content: "";
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		.clearfix{
			zoom: 1;      兼容IE浏览器,清除浮动
		}
	</style>
</head>
<body>
	<!-- ul.list>li{$}*8 -->
	<ul class="list clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<!-- <div style="clear: both;"></div>    清除浮动的第二种方法 （不推荐）-->
	</ul>
	
</body>
</html>
Go· again
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
清除浮动的4种方法
weixin_48669322的博客
02-02 2042
CSS处理浮动的几种方法~ 为什么要清除浮动 清除浮动的方法 1.为什么清除浮动 有的内容多的相同板块，这种情况下设置高度是不现实的。例如淘宝，京东的商品推荐页面，内容多且相同。这个可以使用浮动设置，浮动的内容会自己找到位置。 浮动是浮在盒子上面的，装浮动的盒子目的就是给浮动的元素一个地方，但是不设置高度会导致浮动所在盒子的高度为零，下一块的内容就会到浮动元素的下面被盖住，这就是脱离文档流。 清除浮动就能使元素不脱离文档流。 2.清除浮动的4种方法： 额外标签法（隔墙法）：在浮动的元素后面加一
清除浮动的4种方式
田兴的博客
07-27 5万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。 当我给内部两个盒子加上float属性的时候 底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法（最常用的4种） 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 优点： 通俗易懂，书写方便。（
清除浮动的七种方法
m0_50569176的博客
07-27 3623
浮动元素会脱离文档流，导致不占据页面空间，所以会对父元素带来高度塌陷。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0。 为解决浮动带来的负面影响，需要清除浮动。 清除浮动的方式有很多种，实现的原理主要是靠clear属性，和触发新的BFC。 清除浮动的方法归纳为以下几点： 1.直接设置父元素高度。 优势：简单 弊端：必须要知道父元素高度是多少。 2.设置父元素浮动。 优势：代码少，无语义化问题 我们知道，元素浮动后会创建一个独立的BFC区域，在这个区域中计算高度时需要..
清除浮动的最常用的四种方法，以及优缺点
热门推荐
h_qingyi的博客
07-29 28万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了   总结...
清除浮动的五种方法及优缺点
sinat_56339532的博客
04-26 755
我们首先要思考：为什么要清除浮动？ 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除浮动</title> <style> p{ float:left; height:50px; width:50px; background-color: red;
CSS-清除浮动
01-13
从别人博客看来的，整理成了PPT，分享下吧，感觉挺好懂的
CSS 清除浮动元素方法 整理
09-25
在现代浏览器中，可以考虑使用Flexbox或Grid布局，它们提供了更为强大和灵活的布局机制，不再需要传统的浮动和清除浮动的方法。然而，在向后兼容性和老式浏览器的支持方面，浮动和清除浮动仍然是一个重要的CSS概念。
CSS清除浮动方法汇总
10-20
本文将汇总一些常见的CSS清除浮动的方法。 1. **传统clear属性** CSS的`clear`属性用于指定元素是否可以放在浮动元素的旁边。如果设置为`clear:left`，则元素不会出现在左侧有浮动元素的地方；`clear:right`不让...
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
CSS清除浮动方法总结
09-25
为了解决这个问题，开发者通常会采用一些方法来“清除浮动”。以下是对这些清除浮动方法的详细解释： 1. 加入空`div`并设置`clear: both`： 这是早期常用的清除浮动方法。在浮动元素之后添加一个额外的`<div>`元素...
清除浮动最常用的四种方法
weixin_44723072的博客
08-09 1万+
1、为什么要清除浮动 开发过程中，浮动是需要掌握的一个技能，页面布局当中，在无法确定子元素的高度（height）时，我们无法给父级标签一个固定的高度（height），我们想要的是，由子元素的高度去控制父元素的高度。 所以，当子元素设置了浮动（float）属性之后，父元素的高度没有进行设置，这样就会导致父元素的高度塌陷(原本的height被重置为0)，这就涉及到了清除浮动的重要性 2、清除浮动的三种方法 第一种方法：额外标签法 该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 h
CSS清除浮动的六种方法
若水弹丸之地
03-16 2873
六种方法中，推荐使用第三种。 1、父级div定义 height 原理：手动设置父级div的height，解决了父级div无法自动获取高度的问题。 缺点：只适合高度固定的布局，如果高度和父级div不一样时，会产生问题 &lt;style type="text/css"&gt; .box{background: red; /*解决代码*/ height: 100px; }...
详解清除浮动的多种方法
完善飞跃
03-06 3057
有段时间不写文章了, 以后正确不间断. 清除浮动, 这一篇文章足矣. #浮动让我们既爱又恨爱, 有了浮动我们可以更加方便的布局.恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了).为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的.正所谓万变不离其宗有如下
清除浮动的8种方法
weixin_43932097的博客
05-10 1567
清除浮动的几种方式 1.给父级div定义伪类：after和zoom .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;} .clearfloat{zoom:1;} 这种是最常用的清除浮动的方法也是最推荐的，用起来非常的爽，直接在浮动的两个元素的父级加一个clearfloat类名就可以，...
清除浮动的五种方法详解
qq_43692768的博客
11-07 2万+
前言：   在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。   清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。 实例：   HTML代码基本代码 <!DOCTYPE html> <html lang="
html---表单实例代码
qq_43766304的博客
03-04 4514
html—知识点 表单示例代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
CSS--盒子模型小练习示例代码
qq_43766304的博客
03-06 2205
完成下面的盒子 示例代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
web---js实现网页换肤
qq_43766304的博客
04-11 1187
通过js操作html代码块实现换肤效果 skin-01 css样式代码 body{ background-color: #00FFFF; } input{ width: 200px; height: 50px; background-color: gold; color: red; } skin-02 css样式代码 body{ background-color: palegre...
CSS---盒子模型练习之三个盒子
qq_43766304的博客
03-06 1086
写给自己：配合代码，看看这三个盒子是怎么形成的 这里面用到了 —> 组选择器 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
CSS清除浮动：方法与解析
2. **:after伪类**：利用CSS的`:after`伪元素，动态生成一个用于清除浮动的元素。这种方法保持了HTML的简洁，但需要对旧版本的IE进行hack以实现兼容。 3. **设置overflow**：将父容器的`overflow`属性设置为`hidden...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值