一、起因：
子盒子设置浮动之后效果：
由此可见，蓝色的盒子设置浮动之后，因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子 高度塌陷 。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱
二、解决方案：
- 父盒子设置固定高度------------------给父元素添加固定的高度
- 内墙法 -------------------------------在父元素的后面添加一个空的div添加样式为 clear:both
- 伪元素清除法-------------------------给父元素类名添加一个类叫 clearfix （推荐）
- overflow:hidden---------------------给父元素样式添加 overflow:hidden
（1）父盒子设置固定高度
虽然，给父盒子设置了固定高度能暂时解决我们的问题，但是它的使用不灵活，如果未来子盒子的高度需求发生了改变(网页的多处地方)，那么我们得手动需要更改父盒子的高度。后期不易维护。
应用：网页中盒子固定高度区域，比如固定的导航栏。
缺点：使用不灵活，后期不易维护
（2）内墙法
在浮动元素的后面加一个空的 块级元素 (通常是div),并且该元素设置 clear:both； 属性。clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素的破坏性</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child">儿子</div>
<div class="clearfix"></div>
</div>
</body>
</html>
应用：网页中应用不多，只是为了引导下一个清除浮动的方式。
缺点：结构冗余
（3）伪元素清除法
内墙法是在浮动元素的后面加一个空的 块级元素 (通常是div),并且该元素设置 clear:both； 属性。
那么正好在css3的属性用法中整好有个选择器也完全符合这个用法，伪元素选择器。它就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，允许为元素的 某些部分设置样式 。
表示在p标签元素的最后面添加样式，同时这也正好符合内墙法的用法。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素的破坏性</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.cleafix:after{
content:'.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">儿子</div>
</div>
</body>
</html>
当以后需要清除浮动时只需要在标签中再添加一个 “clearfix” 类就行，十分的方便快捷 ！
编写的伪元素清除法内容解释：
.clearfix:after{
content:''; 表示给.clearfix元素内部最后添加一个内容，该内容为行内元素。
display: block; 设置该元素为块级元素，符合内墙法的需求。（有的地方使用table，因为table也是一个块级元素）
clear: both; 清除浮动的方法。必须要写
overflow: hidden; 如果用display:none;,那么就不能满足该元素是块级元素了。overflow:hidden;表示隐藏元素，但是该元素占位置；而display:none;不占位置。
height: 0;
}
此处梳理一下：after（伪类）和：：after（伪元素）的区别
相同点
- 都可以用来表示伪类对象，用来设置对象前的内容
- :before和::before写法是等效的; :after和::after写法是等效的，版本不同而已
不同点
- :before/:after是Css2的写法，::before/::after是Css3的写法
- :before/:after 的兼容性要比::before/::after好 ，
- 不过在H5开发中建议使用::before/::after比较好
注意
- 这些伪元素 要配合content属性一起使用
- 这些伪元素 不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
- 这些伪元素 的特效通常要使用:hover伪类样式来激活
（4）overflow:hidden
CSS属性overflow定义一个元素的内容太大而无法适应盒子的时候该做什么。它是overflow-x和overflow-y的简写属性
overflow属性不仅仅能实现以上效果，那么当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域，我们叫做它为 块级格式化上下文 。
BFC只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个BFC的元素。
浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
总结：只要我们让父盒子形成BFC的区域，那么它就会自动清除区域中浮动元素带来的影响 。
哪些会形成BFC区域：
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。