HTML如何轻而易举清除浮动

动的目的：把多个盒子放在一行上

清除浮动的目的：解决父盒子高度为0的问题

清除浮动，也称闭合浮动

注：本文不兼容IE6

未清除浮动实现情况：

图1

清除后：

图2

原代码：

复制代码

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

具体方法：

1.额外标签法

在含浮动标签后加兄弟盒子清除浮动

例：

复制代码

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

缺点：添加了许多空div

2.给父盒子overflow:hidden

触发bfc模式（该名词不懂请谷歌/百度，初学者可暂时略过)，直接清除浮动

复制代码

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

overflow: hidden;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

缺点：不可与position属性配合使用

3.伪元素法

给父元素定义伪类:after(此处使用的是公共类clearfix）

复制代码

.clearfix:after{

content:"";/*内容为空*/

visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/

display:block;/*变成块级元素*/

height:0;

clear:both;/*清除浮动*/

}

复制代码

具体代码：

复制代码

<!DOCTYPE html>

<html>

<head>

.clearfix:after{

content:"";/*内容为空*/

visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/

display:block;/*变成块级元素*/

height:0;

clear:both;/*清除浮动*/

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

缺点：IE8以上和非IE浏览器才支持

4.双伪元素法

给父类加上伪类:before和:after

复制代码

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

复制代码

具体代码：

复制代码

<!DOCTYPE html>

<html>

<head>

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

附：

对于上述4种方法，优先推荐方法3和4，当然1和2也可，可根据具体情况使用。

还有几种乱七八糟的清除浮动方法，但是缺点多，故不提起.

最后你觉得我们的文章对你有帮助，欢迎关注我，可以私信我：久伴，领取学习资料，在评论下方可以关注我的学习群，你可以随时在上面向我们提问，把你在学习前端过程中所遇到的问题发给我们。我们每天都会按时回复大家的每一个问题，希望久伴可以伴随你从入门到专家。

动

浮动是为了元素标签的并排显示问题。

我们在浏览网页的时候，经常会看到几个 div 块是可以并排显示的，浮动就是解决这样问题的方法之一。

float属性有以下的值

float: left; 左浮动

float: right 右浮动

浮动的特点

浮动主要针对的是并排显示的盒子而言。
在一个父容器的盒子里，兄弟元素之间要浮动必须都浮动。
父容器必须要有一个足够的宽度，否则不足以使得各个子元素之间并排展示。
一个父容器的盒子内，兄弟元素会按照顺序贴靠，如果是左浮动，就往左贴合；如果是右浮动，就往右贴合。如果发现贴合的盒子后没有足够的空间，则会在寻找前一个兄弟元素进行贴靠。直到空间合适为止。
浮动的元素已经脱离了标准的HTML文档流，不再区分块级元素、行内元素并且一律能设置宽度和高度，即使它是span标签或者a标签

一个浮动的例子

<!--一个浮动的例子-->
<style>


    .box1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
    }


    .box1 .con1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }


    .box1 .con2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }


    .box1 .con3 {
        width: 201px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
    }
</style>
<div class="box1">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
</div>

一个顺序贴靠的例子

<!--  一个顺序贴靠的例 子-->
<!-- 以下代码中 兄弟元素 con1， con2， con3 之间会进行顺序贴靠-->
<!-- con3 在贴靠 con2 的时候，发现父容器的宽度只能是400px, 分别被con1 和 con2 占据， 所以con3 会找 cont1 贴靠，最终con3 位于 con1右边， con2下边 -->


<style>


  .box1 {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
  }


  .box1 .con1 {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: left;
  }


  .box1 .con2 {
      width: 200px;
      height: 100px;
      background-color: blue;
      float: left;
  }


  .box1 .con3 {
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
      float: left;
  }
</style>
<div class="box1">
  <div class="con1"></div>
  <div class="con2"></div>
  <div class="con3"></div>
</div>

清除浮动

清除浮动是为了不影响设置浮动标签的后续的标签的布局展示。

因为，在一个父容器中，子元素浮动了，脱离了标准文档流，不在占用之前的位置，会导致无法撑开没有设置高度的父元素；从而导致后续的结构挤压，造成整个页面布局的混乱。

给父元素加个高度。在那些明确知道父容器高度的情况下，可以使用。

<style>
  * {
    margin: 0;
    padding: 0;
  }


  div {
    height: 100px;
  }
  p {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
  }
</style>


<body>
  <div>
    <p></p>
    <p></p>
  </div>


  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

后续元素增加 clear:both ,清除前面元素对自己的影响。

<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box2 {
        margin-top: 20px;
        clear: both;
    }
    p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: red;
    }
</style>


<body>
<div>
    <p></p>
    <p></p>
</div>


<div class="box2">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>

浮动的父容器添加后续伪元素，clear:both ，清除浮动对后续元素的影响(推荐方式)。

<style>
  * {
      margin: 0;
      padding: 0;
  }


  .cleafix::after {
      content: '';
      clear: both;
      display: block
  }


  p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: red;
  }
</style>


<body>


<div class="cleafix">
  <p></p>
  <p></p>
</div>


<div class="cleafix">
  <p></p>
  <p></p>
  <p></p>
</div>
</body>

额外的空标签，在浮动元素的父盒子之后添加一个空标签，空标签上添加 clear:both 属性。

<style>
* {
  margin: 0;
  padding: 0;
}


.clearboth {
  clear: both;
}


p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>


<body>
<div>
<p></p>
<p></p>
</div>


<div class="clearboth"></div>


<div>
<p></p>
<p></p>
<p></p>
</div>
</body>

浮动元素的父容器添加 overflow:hidden , 使得子元素的浮动只能作用在父容器内。

除浮动

上期跟大家分享了浮动，这些咱们讲清除浮动

为什么要清除浮动呢，

因为浮动导致父元素的塌陷，所以要清除浮动

清除浮动 CSS代码 clear:left right both none；

子级办法

子级最后添加空标签

父级办法

加高问题：扩展性不好

inline-block 清浮动方法问题：margin:auto;失效

overflow:hidden 清浮动方法；问题：要配合宽度

after伪元素内部末尾添加内容时下主流

.clearfix{zoom:1;}.

clearfix：after{content:'';display:block;clear:both;}

min-width 设置元素的最小宽度

max-width 设置元素的最大宽度

获取详细的讲解可以关注私信我，我免费分享一套网站前端的视频教程给大家。

最后欢迎大神在留言区吐槽

在线咨询

上一篇：HTML ul li 横排居中排列的方法，三步骤及实例
下一篇：SemanticKernel之使用结构化Prompt

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML如何轻而易举清除浮动

动

清除浮动

除浮动

您的项目需求