前端基础面试题

关于清除浮动的一些方法

1.什么是浮动及其特点

1.浮动就是脱离标准流,不占据空间

2.浮动的元素比标准流高出半个级别

3.浮动找浮动下一个浮动元素会在上一个浮动的左右浮动

4.浮动会受上面元素边界的影响

2.为什么要清除浮动

1.子元素浮动后不占位置,父元素无法被撑开,影响同级父元素父元素

2.一浮都浮,前面的元素浮动后后面的也要跟随前面的元素一起浮动要不然会脱离标准流影响网页的布局

3.清除浮动的方法

直接给父元素设置固定宽高
使用额外标签法(核心:celar:both)
单伪元素清除法 ::before...之前::after...之后(常用方法)标签里面需要加入content:''； 以及display:block敲黑板啦!!核心代码(celar:both)
设置双伪元素清除法(还可以解决盒子塌陷咯)
设置 visibility: hidden;
关于清除浮动代码

<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;
      box-sizing: border-box;
    }

    .box {
      /* overflow: hidden; */
      width: 800px;
      /* height: 200px; */
      background-color: pink;
      margin: 50px auto 0;
    }

    .box .box1 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    footer {
      height: 100px;
      background-color: red;
    }

    /* 
    额外标签法
    .clear {
      clear: both;
    } */
    /* 单伪元素清除法 */
    /* .clearfix::after {
      content: '.';
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
    } */
    /* 双伪元素清除法 */
    /* .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
    }

    .clearfix::after {
      clear: both;
    } */

    /* 
    清除浮动的方法
    方法1  直接给父元素设置高度
    方法2 额外标签法(在父元素内容的最后添加一个块级标签 在给块级标签设置clear: both;)
    方法3 单伪元素清除法
    方法4 双伪元素清除法
    方法5 给父元素设置 overflow: hidden;
    */
  </style>
</head>

<body>
  <div class="box clearfix">
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <!-- <div class="clear"></div> -->
  </div>
  <footer></footer>
</body>

</html>

清除浮动前

清除浮动后

敲黑板!!! 关于浮动消除方法独家秘方只传有"元"人

前端基础面试题

1.什么是浮动及其特点

2.为什么要清除浮动

3.清除浮动的方法