CSS 为什么要清除浮动与以及清除浮动的应用场景(clear:

作者: CoderZb | 来源:发表于2019-11-24 16:47 被阅读0次

清除浮动
CSS clear both清除浮动
11.22 前端学习
前端06
06 前端学习
CSS 为什么要清除浮动与以及清除浮动的应用场景(clear:
导航条；清除浮动；开班信息
css3复习
一篇文章带你了解CSS clear both清除浮动
Test10

为什么清除浮动？:多少情况下，父盒子A是不方便给固定高度的(因为里面的子盒子a1和子盒子a2的内容是动态的,所以自动会把父盒子A撑开，因此不需要给定高度)。而子盒子a1和子盒子a2设置浮动后，子盒子就不占原文档流的位置，就会造成父盒子A高度为0，就影响了下面的标准流盒子(A的兄弟,为B)的布局。
清除浮动的应用场景？:父盒子没有设定高度并且父盒子里面的子盒子设置了浮动(有嵌套关系也是一种前提哦)，这种情况下，如果影响了下面的相邻的兄弟盒子的布局，此时要对父盒子设置清除浮动。(注意：如果浮动的盒子C和未浮动的盒子D处于同级，那么C、D最好都设置浮动或者都不设置浮动，否则你是纯属给自己找麻烦玩。因为应用场景是前面那段话(未设定高度+有嵌套关系+嵌套的子盒子设置了浮动))
清除浮动的代码写在哪个标签上？：如果先从B盒子开始布局错乱，就向上寻找和B盒子相邻且同级的A盒子，只需对A盒子增加一个伪类，然后将清除浮动的代码写在这个伪类中。
清除浮动的代码如下：
.clearBoth:after {
      content: ""; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;
}   
.clearBoth {
  *zoom: 1;
}
标准文档流与清除浮动与的显示效果区别:

image.png

标准文档流写法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动与浮动应用场景</title>
    <meta name="description" content="清除浮动与浮动应用场景" />
    <meta name="Keywords" content="清除浮动与浮动应用场景" />

</head>
<style type="text/css">
    /*清除浏览器默认间距 */
    * {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .A {
        background-color: #4b88cb;
        width: 838px;
    }
   .a1 {
        background-color: #fdb409;
        width: 245px;
        height: 245px;
   }
   .a2 {
        background-color: #e66826;
        width: 245px;
        height: 245px;
   }
   .B {
    background-color: #949494;
    width: 760px;
    height: 146px;
   }
</style>
<body>
    <div class="A ">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
    </div>
    <div class="B">B</div>
   
</body>
</html>

标准文档流的效果截图

image.png

浮动写法(没有清除浮动)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动与浮动应用场景</title>
    <meta name="description" content="清除浮动与浮动应用场景" />
    <meta name="Keywords" content="清除浮动与浮动应用场景" />

</head>
<style type="text/css">
    /*清除浏览器默认间距 */
    * {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .A {
        background-color: #4b88cb;
        width: 838px;
    }
   .a1 {
        float: left;
        background-color: #fdb409;
        width: 245px;
        height: 245px;
   }
   .a2 {
        float: left;
        background-color: #e66826;
        width: 245px;
        height: 245px;
   }
   .B {
        background-color: #949494;
        width: 760px;
        height: 146px;
   }
</style>
<body>
    <div class="A">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
    </div>
    <div class="B">B</div>
</body>
</html>

没有清除浮动的效果截图

image.png

浮动写法(清除浮动的写法)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动与浮动应用场景</title>
    <meta name="description" content="清除浮动与浮动应用场景" />
    <meta name="Keywords" content="清除浮动与浮动应用场景" />

</head>
<style type="text/css">
    /*清除浏览器默认间距 */
    * {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .A {
        background-color: #4b88cb;
        width: 838px;
    }
   .a1 {
        float: left;
        background-color: #fdb409;
        width: 245px;
        height: 245px;
   }
   .a2 {
        float: left;
        background-color: #e66826;
        width: 245px;
        height: 245px;
   }
   .B {
        background-color: #949494;
        width: 760px;
        height: 146px;
   }
   .clearBoth:after {
        content: ""; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }   
    .clearBoth {
        *zoom: 1;
    }
</style>
<body>
    <div class="A clearBoth">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
    </div>
    <div class="B">B</div>
   
</body>
</html>