浮动与清除浮动

最新推荐文章于 2023-07-20 17:15:10 发布
最新推荐文章于 2023-07-20 17:15:10 发布
阅读量168 收藏
点赞数 2
分类专栏： css基础篇 文章标签： 浮动与清除浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang031997/article/details/102641907
版权

float

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值
left：向左浮动

right：向右浮动

none：默认值，不浮动
参考案例

clear
clear属性规定元素的哪一侧不允许其他浮动元素。

值描述
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
inherit规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

清除浮动
清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
}

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

辰月初九
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
# 浮动与清除浮动
Raaabbt GO!!
04-17 134
浮动与清除浮动 浮动布局是一种常见的布局方式，最初的使用目的是进行图文的混排 这篇文章对浮动布局进行简单的总结，包括以下内容： 浮动 单个浮动元素 多个浮动元素 父子元素 清除浮动 浮动的使用场景 浮动 浮动通过css定义： #div1{ float:left; } 浮动可以取的值：none（默认）|left|right 当元素进行左浮动或者右浮动之后会脱离文档流，并且构成一个...
清除浮动的4种方式
热门推荐
田兴的博客
07-27 5万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。 当我给内部两个盒子加上float属性的时候 底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法（最常用的4种） 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 优点： 通俗易懂，书写方便。（
2020-10-23
cxxhhzsl的博客
10-23 317
胃小菜 来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。 我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。 第二个div中的li，去贴第一个div中最后一个li的边了。 原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。 清除浮动方法1:给浮动的元素的祖先元素加上高度 如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮
清除浮动（详解）
wwwjjjjj666的博客
12-06 2549
清除浮动（详解）
清除浮动的四种方式
天命爱心职责的博客
07-06 1525
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流(标准流)，浮动和定位，其中浮动让盒子从普通流中浮起来,浮动元素具有行内块特性，表现为让多个块级元素在一行显示。为什么要清除浮动，因为浮动的盒子脱离标准流，如果父盒子没有设置高度的话，下面的盒子就会撑上来。......
清除浮动的五种常用的方法（ 解决方法 详细解释 原理 产生原因 ）
最新发布
zhp19513507633的博客
07-20 4850
清除浮动的五种常用的方法（ 解决方法 详细解释 原理 产生原因 ）
Float浮动与清除浮动
01-08
浮动（Float）是CSS布局中一个重要的概念，用于创建网页元素的水平排列，尤其是在传统的流式布局中。...需要注意的是，不同清除浮动的方法适用于不同的场景，开发者应根据项目需求和浏览器兼容性选择合适的方法。
概述页面中浮动与清除浮动
09-28
本文主要对页面中浮动与清除浮动进行了概述，并举例说明，具有一定的参考价值，下面跟着小编一起来看下吧
CSS浮动与清除浮动
01-08
今天是第一次写博客，已经迫不及待地想把这周在逆战班学习的内容分享一下，这是我对css浮动与清除浮动的理解，希望可以帮助你。 CSS浮动与清除浮动（ 本文以div元素布局为例。） 前言：由于CSS内容比较多，只能有...
浅谈css中浮动和清除浮动带来的影响
09-27
1. **隔墙法**（clearfix）：在需要清除浮动的元素前添加一个无内容的空元素，如`<div class="clearfix"></div>`，并为`.clearfix`类设置样式`clear: both;`。这种方法在早期被广泛应用，但现在已逐渐被更现代的解决...
css 怎么清除浮动
09-25
描述部分提到的站点更新、JS压缩等是网站优化的常规操作，与清除浮动这个主题直接关联不大，但它们都是网站开发中的重要环节。 清除浮动主要有以下几种方法： 1. **伪类`:after`**：通过在浮动元素后面添加一个看...
清除浮动的方法（4种）
CSDNhaoheng的博客
03-15 1149
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） 2.父级添加overflow属性（父元素添加overflow:hidden auto或scroll）（不推荐） 3.使用after伪元素清除浮动（推荐使用） （百度、网易用此方法清除浮动） .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0;
清除浮动的5种方法
weixin_38563784的博客
05-18 4522
清除浮动 盒子塌陷
清除浮动的几种方法
xxx857857857的博客
09-15 1338
浮动的布局比标准流高了半个层级，因此它并不占标准流下，如果子元素浮动了，父元素又没有设置高度，此时子元素无法撑开盒子，就如同下面这种情况。这种情况也可以清除浮动，在之后项目开发的时候，可以写这个方法或者下面的要讲的方法，有需要清除浮动的可以加clearfix类名。这种方法不适用与不确定高度的元素，因为之后的数据很多来自数据库，无法判断高度。可以看到，父元素pink的颜色消失了，而它的兄弟元素也因为它的消失，占了它原本的位置。这种方法不仅可以清除浮动还可以防止塌陷，塌陷的条件是父子元素都为块级元素，且嵌套。
清除浮动最常用的四种方法
weixin_44723072的博客
08-09 1万+
1、为什么要清除浮动 开发过程中，浮动是需要掌握的一个技能，页面布局当中，在无法确定子元素的高度（height）时，我们无法给父级标签一个固定的高度（height），我们想要的是，由子元素的高度去控制父元素的高度。 所以，当子元素设置了浮动（float）属性之后，父元素的高度没有进行设置，这样就会导致父元素的高度塌陷(原本的height被重置为0)，这就涉及到了清除浮动的重要性 2、清除浮动的三种方法 第一种方法：额外标签法 该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 h
常用的清除浮动的三种方法
LYY_record的博客
02-28 2456
1、给受到浮动影响的元素添加overflow：hidden。 原因：overflow属性会触发BFC BFC：block（块级） formatting（格式化） context（上下文）的简写， 意思是：以块级元素的排列规则在当前环境中排列 <style> .box1{ width: 100px; height: 100px; background-color: #f00;
清除浮动的五种方法
朝阳39的博客
10-17 2431
清除浮动，指的是清除浮动与浮动之间的影响。 如下图，第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会换行分成两排）。 造成这个现象的根本原因是：li的父亲div没有设置高度，导致这两个div的高度均为0px， div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。 撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。 方法1：给浮...
CSS/HTML 实现好看的Switch开关
yang031997的博客
11-06 1万+
Switch 开关 HTML <input type="checkbox" class="switch"> CSS /* Switch开关样式 */ /* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */ input[type='checkbox'].switch{ outline: none; appearance...
给我一个包含CSS3新增的盒子相关属性、盒子类型及类型转换、外边距、浮动与清除浮动、定位相关的属性的网页代码
06-11
以下是一个包含CSS3新增的盒子相关属性、盒子类型及类型转换、外边距、浮动与清除浮动、定位相关的属性的网页代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3盒子模型</title> <style> /* 盒子相关属性 */ .box1 { width: 200px; height: 100px; border: 1px solid #ddd; box-sizing: border-box; box-shadow: 2px 2px 5px #aaa; border-radius: 10px; outline: 2px solid red; outline-offset: 10px; } /* 盒子类型及类型转换 */ .box2 { width: 100px; height: 50px; background-color: #ddd; margin: 10px; display: inline-block; } /* 外边距 */ .box3 { width: 100px; height: 50px; background-color: #ddd; margin: 10px 20px; } /* 浮动与清除浮动 */ .float-left { width: 100px; height: 50px; background-color: #ddd; float: left; margin-right: 10px; } .clearfix::after { content: ""; display: block; clear: both; } /* 定位相关的属性 */ .box4 { width: 100px; height: 50px; background-color: #ddd; position: relative; top: 10px; left: 10px; } .box5 { width: 100px; height: 50px; background-color: #ddd; position: absolute; top: 10px; right: 10px; } .box6 { width: 100px; height: 50px; background-color: #ddd; position: fixed; bottom: 10px; left: 10px; } </style> </head> <body> <h1>CSS3盒子模型</h1> <h2>盒子相关属性</h2> <div class="box1"></div> <h2>盒子类型及类型转换</h2> <div class="box2"></div> <div class="box2"></div> <div class="box2"></div> <h2>外边距</h2> <div class="box3"></div> <div class="box3"></div> <div class="box3"></div> <h2>浮动与清除浮动</h2> <div class="float-left"></div> <div class="float-left"></div> <div class="clearfix"></div> <h2>定位相关的属性</h2> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> </body> </html> ``` 在这个网页中，我们使用了不同的类名来区分不同的盒子，并对每个盒子设置了相应的CSS属性。你可以复制这段代码，在本地浏览器中查看效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值