Pink前端学习--清除浮动篇-CSDN博客

本文链接：https://blog.csdn.net/m0_64882756/article/details/137199460

一为什么要清除浮动？

1. 是因为不知道大盒子内到底有多少个小盒子，不能确定其高度。

但是又不能是其父盒子高度为0 会影响子盒子的排版，所以要清除浮动后不设置其高度

清除浮动的本质就是清除浮动元素造成的影响，因为浮动后子盒子不占有位置整体父盒子高度就为0，就会影响父元素以外的元素，但是如果父盒子本身有高度就不影响，则不需要清除浮动。

清除完浮动后，父级就会根据子盒子自动检测高度。父级有了高度就不会影响后面的标准流盒子

2.清除浮动就是闭合浮动把子盒子

二额外标签法

2.1 在最后一个浮动子元素后面添加一个盒子（.clear盒子）当作一堵墙堵住前面浮动的盒子。

但是添加的盒子只能是块级元素。

clear : none | left|right| both  清除浮动

1.并且最常用是使用clear:both清除左右两边的浮动。

2.比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动，大对象背景或边框不能正确显示，这个时候就需要clear:both清除浮动。

2.2 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常见清除浮动四个方式-clear：both;</title>
    <style>
      .box {
        width: 800px;
        margin: 0 auto;
        border: 1px solid black;
      }
      .box1 {
        float: left;
        width: 250px;
        height: 200px;
        background-color: rgb(226, 190, 196);
      }
      .box2 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

       .clear {
            clear: both;
        }

      .footer {
        height: 200px;
        background-color: #837e7e;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>

    <p>1.用额外标签清除浮动</p>
    <div class="box">
      <div class="box1">box</div>
      <div class="box2">box1</div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

三给父亲添加overflow:hidden|auto|scroll；（也能防止外边距合并）

想要清除盒子的浮动找到父元素给它添加overflow:hidden|auto|scroll；（缺点：无法显示溢出的部分他能隐藏盒子溢出部分）

四清除浮动----：after伪元素法

3.1after表示在整个父盒子后面添加一个新盒子但是是行内元素要改成块元素

给这个添加的盒子清除浮动然后在隐藏

可以直接复制粘贴用来清除父盒子浮动

      .clearfix:after{
        
	   	  content: '';
	   	  display: block;
	   	  height: 0;
	   	  clear: both;
	   	  visibility: hidden;
	   }
	   .clearfix{
	   	/* zoom: 1;为 IE6、IE7浏览器设置的清除浮动 */
	   	   zoom: 1;
	   }

写完css样式后要在html里面添加class对于的类名 <div class="box clearfix">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见清除浮动四个方式</title>
    <style>
        
      .clearfix:after{
        
	   	  content: '';
	   	  display: block;
	   	  height: 0;
	   	  clear: both;
	   	  visibility: hidden;
	   }
	   .clearfix{
	   	/* 为 IE6、IE7浏览器设置的清除浮动 */
	   	   zoom: 1;
	   }

            .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid black;
        }

        .box1 {
            float: left;
            width: 250px;
            height: 200px;
            background-color: rgb(226, 190, 196);
        }

        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }


        .footer {
            height: 200px;
            background-color: #837e7e;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- after表示在整个父盒子后面添加一个新盒子 但是是行内元素要改成块元素 
         给这个添加的盒子清除浮动 然后在隐藏 
        可以直接复制粘贴用来清除父盒子浮动
          .clearfix:after{
        
	   	  content: '';
	   	  display: block;
	   	  height: 0;
	   	  clear: both;
	   	  visibility: hidden;
	   }
	   .clearfix{
	   	/* 为 IE6、IE7浏览器设置的清除浮动 */
	   	   *zoom: 1;
	   }
    -->
    <p>3.伪元素清除浮动 使用after伪元素</p>
    <div class="box clearfix">
        <div class="box1">box</div>
        <div class="box2">box1</div>

    </div>
    <div class="footer"></div>

</body>

</html>