深度理解CSS clear:both的使用

站长资源 2024/11/24 佚名

57 1538 57

DDR爱好者之家 Design By 杰米

clear:both用来清除浮动这是一直来的印象，但是自己很少会用这个，理解其实也不太正确，今天查查了资料，记录一下

float的脱离文档流

float的原始作用是为了实现文字环绕的作用，可以理解为部分脱离文档流。

CSS中说脱离文档流是指盒子从普通的布局排版中拿出来，其他盒子进行放置时，会当其不存在而进行布局。而脱离文档流分为两种

完全脱离文档流：例如position:absolute，使用绝对定位的盒子，其他盒子无论是其本身还是里面的任何元素都会无视这个绝对定位的盒子进行布局。
部分脱离文档流：即float盒子，使用float属性后，其他block盒子会无视float盒子进行布局，但是其他盒子内的inline元素和inline-block元素依旧会为这个浮动的盒子让出位置。

clear:both

clear:both是作用于添加属性的盒子本身的
在一个盒子上添加clear:both意味着这个盒子的顶边框将会低于在它之前的任何浮动盒子的底外边距。

所以clear:both并不是清除浮动，而是清除浮动所造成的影响，浮动的盒子依旧是部分脱离文档流的。

而clear的取值是left还是right,在我看来是取决于想要低于的那个浮动盒子的浮动方向。而both的取值，则会低于所有在在它之前的任何浮动盒子

清除影响的例子

我们设置三个盒子A、B、C

当三个盒子都左浮动是时：

C设置不浮动时：

给B添加clear:both/clear:left：

可以看到，B本身造成的浮动影响被清除了，他的顶边框在任何在他之前的浮动盒子的底部之下,但是没有浮动的盒子C仍然在AB的下边，其中的字体为浮动的盒子让出了位置。

给父盒子添加伪元素::after

现在，我们用一个div（class:box）包裹住ABC三个盒子，在box之外添加一个盒子out,其中ABC、out全部设置了浮动。现在他们长这样：

去掉out的浮动：

这是理所当然的。

给box添加一个伪元素

.box::after{
  clear: both;
  height:10px;
  width:10px;
  background:yellow;
  display: block;
  content: "";
}

现在外盒子out的浮动影响被清除了，但是这不是因为clear:both清除了浮动，而是因为after伪元素本身的浮动影响清除了，它现在处于任何在它之前的浮动盒子的下面，这也使得box的高度不再塌陷，所以out现在只是处于box下面，这是正常的文档流。

## 结束

这是一个CSS的基础知识点，但是一直没有认真看过，这次整理了一下，如果有错误的话，请看到这篇小文的大佬们指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

CSS,clear:both

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“深度理解CSS clear:both的使用”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

深度理解CSS clear:both的使用

better-scroll实现菜单和内容联动的效果

CSS实现元素浮动和清除浮动的方法

评论“深度理解CSS clear:both的使用”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接