单伪元素用clear清除浮动时遇到的问题以及解决方法

Fe2Fe3

于 2022-11-16 12:48:27 发布

阅读量904

点赞数 2

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/Fe2Fe3/article/details/127881395

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了大一学生在学习前端开发过程中遇到的图文环绕和网页布局问题。通过分析代码，解释了如何使用额外标签法和伪元素清除浮动的影响，以及如何利用浮动和伪元素实现图文正确布局。文章详细描述了解决问题的两种方法，并提供了测试代码。

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

本人大一，目前正在B站上看黑马程序员的视频学习前端开发，第一次试着将学习中遇到的问题以及解决的思路通写博客给其他遇到同样问题的人们提供一个参考，如果内容有什么错误的话我会很感激读者的纠正。

在学习实现图文环绕和网页布局这一节的时候，老师是分着讲的，但我却想着同时把这两个功能同时实现，却得到了不想要的结果：

下面的两个盒子掉了上去，这是最初的代码：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        img {
            width: 300px;
            height: 300px;
            float: left;
            
            
        }
        p{
            background-color:skyblue;
            text-indent: 2em;
            
        } 
        div{
        width: 100px;
        height: 100px;
        }
       .one {
        background-color: green;
        float: left;
    }
    .two {
        background-color: pink;
        float: right;
        
    }   
 
    </style>   
</head>
<body>
     <!--图文环绕-->   
     <img src="../图音/3.jpg" alt="" width="300px" height="300px" >
     <p class="clearfix">
         神里绫华，米哈游出品的游戏《原神》及其衍生作品中的角色，稻妻“社奉行”神里家的大小姐。容姿端丽，品行高洁。绫华贵为“公主”，平日主理家族内外事宜。绫华常出现在社交场合，与民间交集也较多。因此，更被人们熟悉的她反而获得了高于兄长的名望，被雅称为“白鹭公主”。众所周知，神里家的女儿绫华小姐容姿端丽、品行高洁，是深受民众钦慕的人物 [9]。  
         继承稻妻城中至为尊崇的三家名门之一一神里家族的，是一对兄妹。哥哥绫人出任「家主」- 职，掌管政务，妹妹绫华贵为「公主」，平日主理家族内外事宜
     </p>

    <div class="one">one</div>
    <div class="two">two</div>
</body>

后面学习了额外标签法清除浮动带来的影响解决了这个问题，但到了下一集学习单伪元素法中after伪元素的时候又出了问题，

.clearfix::after{
        content: '';
        display: block;
        clear: both;
        height: 0;
      }

p标签看起来被撑起来了，于是我试了用box-sizing: border-box; / 设置宽高等办法都不管用

办法一：

之后我去问了学长，学长给的第一个办法是给下面两个两个小盒子一个父级盒子，然后给两个小盒子设置宽高再对父级盒子用before伪元素来清除浮动：

<style>
.box::before{
        content: '';
        display: block;
        clear: both;
      }
</style>
<body>
 <div class="box">
        <div class="one">one</div>
        <div class="two">two</div>
     </div>
</body>

clear：both会清除掉浮动，这个伪元素会按照标准流来排，就把上面的浮动隔离掉了，相当于隔离掉了浮动区域和正常区域，最终实现了如下效果

知识点:

然后学长在MDN里找到的知识点：当clear应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的顶部外边距会折叠。

也就是说我最初的代码只是给图片添加了浮动，却没给P添加浮动，在p后面用伪元素清除浮动后P依旧会按照标准流来排，非浮动块P的边框边界被强制移动到了图片外边界下方。

办法二:

有了这个知识点后就很好解决了，在原先after伪元素里添加一个浮动float:left默认高度为0的情况下在图片下方形成一个隔离将P后面的标准区隔离开来，之后的两个小盒子就不会掉上去了。

.clearfix::after{
        float:left;
        content: '';
        display: block;
        clear: both;
      }

本文测试代码:

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img {
            width: 300px;
            height: 300px;
            float: left;
            
            
        }
        p{
            background-color:skyblue;
            text-indent: 2em;
        } 

      /* .qingchu{              额外标签法
        clear: both;
        height: 0;
      } */

      /* .box::before{
        content: '';
        display: block;
        clear: both;
        
      } */

      .clearfix::after{
        float:left;
        content: '';
        display: block;
        clear: both;
      }
      
      div{
        width: 100px;
        height: 100px; 
        
      }
       .one {
        /* width: 100px;
        height: 100px; */
        background-color: green;
        float: left;
        }
        .two {
           /* width: 100px;
        height: 100px; */
        background-color: pink;
        float: right;       
        } 
    </style>
</head>
<body>
    <!--图文环绕-->   
    <img src="../图音/3.jpg" alt="" width="300px" height="300px" >
    <p class="clearfix">
        神里绫华，米哈游出品的游戏《原神》及其衍生作品中的角色，稻妻“社奉行”神里家的大小姐。容姿端丽，品行高洁。绫华贵为“公主”，平日主理家族内外事宜。绫华常出现在社交场合，与民间交集也较多。因此，更被人们熟悉的她反而获得了高于兄长的名望，被雅称为“白鹭公主”。众所周知，神里家的女儿绫华小姐容姿端丽、品行高洁，是深受民众钦慕的人物 [9]。  
        继承稻妻城中至为尊崇的三家名门之一一神里家族的，是一对兄妹。哥哥绫人出任「家主」- 职，掌管政务，妹妹绫华贵为「公主」，平日主理家族内外事宜
    </p>

    <!-- <div class="qingchu"></div> -->        <!--额外标签法-->>
    <!-- <div class="box"> -->
            <div class="one">one</div>
            <div class="two">two</div>
    <!-- </div> -->
        
</body>
</html>

感谢阅读，希望对别人能有所帮助，有什么错误也可以向我纠错谢谢。