前端歌谣的刷题之路-第一百二十七题-浮动清除

最新推荐文章于 2024-09-13 10:46:15 发布

前端大歌谣

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量56

点赞数

分类专栏：前端牛客刷题记录文章标签：前端

本文链接：https://blog.csdn.net/geyaoisnice/article/details/125643658

版权

前端牛客刷题记录专栏收录该内容

171 篇文章 4 订阅

订阅专栏

本文介绍了浮动元素如何影响文档流，导致父级元素高度塌陷的问题，并通过设置`clear`属性来解决。通过示例展示了当为`.media`类的盒子设置`float:left`后，文字如何绕过浮动元素，以及应用`clear:left`到`.clear-left`类的`p`标签上如何调整布局，使得`section`元素包含浮动盒子的高度。

摘要由CSDN通过智能技术生成

前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣

题目

通过前面的学习了解到，浮动元素会脱离文档流，因此不会影响其他元素。但,在之前介绍浮动盒子时提到了"文档流中的元素几乎认为浮动盒子不存在"，实际上被浮动盒子覆盖的区域中的文本内容会识别到浮动盒子并且绕开浮动盒子。
现在给类名为"media"的盒子设置"float: left"属性，让该盒子成为浮动盒子，背景色可以自定义便于观察。此时可以观察到盒子下方的文字内容跑到了盒子右侧。通过调试工具可以发现，两个"p"标签被浮动元素所覆盖，并且内部的文字识别到了浮动元素从而绕开了浮动元素。如果给"section"元素添加边框，就会发现"section"这个父级盒子的高度只有两个"p"标签那么高，并没有将浮动元素的高度计算进去，这样会让布局很困难。
clear属性的值有"left"、"right"、"both"和"none"，用于指定盒子的那一侧不应该紧挨着浮动盒子。现在再给类名为"clear-left"的"p"标签设置"clear: left"属性，现在可以发现"universe"文本到了浮动盒子的下方并且"section"盒子的高度也发生了变化，该高度包含了浮动盒子的高度。
完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动清除</title>
</head>
<style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }
 .media {  
float:left;
background-color:pink; 
width: 100px;          
height: 100px;        
}       
.clear-left {      
clear:left;        

}      
section{
border:2px solid black;  
} 
</style>
<body>
  <section>
    <div class="media"></div>
    <p>hello</p>
    <p class="clear-left">universe</p>
</section>
</body>
</html>