【夯实基础--CSS】=＞浮动(float)，2024年最新字节Web前端高级岗

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

总结：

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

• 准确地说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动本质:清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法

选择器 { clear: 属性值; } clear 清除

| 属性值 | 描述 |

| :-- | :-- |

| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |

| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |

| both | 同时清除左右两侧浮动的影响 |

实际工作中,几乎只用clear: both

1).额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>，或则其他标签br等亦可。

• 优点：通俗易懂，书写方便

• 缺点：添加许多无意义的标签，结构化较差。

2).父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。

• 优点： 代码简洁

• 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3).使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

.clearfix:after {

content: “”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

/* IE6、7 专有 */

.clearfix {

*zoom: 1;

}

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

• 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4).使用双伪元素清除浮动

.clearfix:before,

.clearfix:after {

content: “”;

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

• 优点： 代码更简洁

• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

清除浮动总结

问题：什么时候用清除浮动呢？

1. 父级没高度

2. 子盒子浮动了

3. 影响下面布局了，我们就应该清除浮动了。

| 清除浮动的方式 | 优点 | 缺点 |

| :-- | :-- | :-- |

| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |

| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |

| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |

| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |

CSS属性书写顺序

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

2. 自身属性：width / height / margin / padding / border / background

3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {

display: block;

position: relative;

float: left;

width: 100px;

height: 100px;

margin: 0 10px;

padding: 20px 0;

font-family: Arial, ‘Helvetica Neue’, Helvetica, sans-serif;

color: #333;

background: rgba(0,0,0,.5);

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-o-border-radius: 10px;

-ms-border-radius: 10px;

border-radius: 10px;

}

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
固。

[外链图片转存中…(img-9qL5aVRO-1713216790563)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-KmSxuAEE-1713216790564)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！