CSS清除浮动技术

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将学习CSS中的 clearfix 技术。该技术用于确保一个元素清除其浮动子元素。我们将探讨如何在代码中实现此技术,并讨论其局限性。在本实验结束时,你将对如何在CSS布局中使用 clearfix 有扎实的理解。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35182{{"`CSS清除浮动技术`"}} css/margin_and_padding -.-> lab-35182{{"`CSS清除浮动技术`"}} css/display_property -.-> lab-35182{{"`CSS清除浮动技术`"}} css/pseudo_elements -.-> lab-35182{{"`CSS清除浮动技术`"}} end

清除浮动

虚拟机中已经提供了 index.htmlstyle.css

在使用 float 构建布局时,为确保一个元素能自动清除其浮动子元素,你可以使用 ::after 伪元素,并应用 content: '' 使其能影响布局。此外,使用 clear: both 让该元素清除之前的左右浮动。不过,只有在容器中没有非浮动子元素,且在清除浮动的容器之前(但在相同格式化上下文内,例如浮动列)没有高的浮动元素时,此技术才会正常工作。例如:

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.floated {
  float: left;
  padding: 4px;
}

请注意,相比于使用 float 构建布局,推荐使用更现代的方法,比如弹性盒布局(flexbox)或网格布局(grid layout)。

请点击右下角的“Go Live”,在端口8080上运行网络服务。然后,你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你!你已完成清除浮动实验。你可以在LabEx中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程