CSS清除浮动的方法

xiaohai 2018-09-01 10:35:23 共2638人围观 标签： CSS  前端 
简介清除CSS浮动几乎可以说的每个WEB前端开发者所必备的技能之一，但有些刚刚接触HTML、CSS的开发者，还不懂如何清除CSS浮动，导致页面布局错乱，本文将介绍三种清除CSS浮动的方法，希望对大家有所帮助。

在我们在做WEB布局设计的时候，总会遇到一些奇奇怪怪的问题。比如下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动测试</title>
  <style type="text/css">
    .container {
      background-color: red;
    }

    .left {
      background-color: #00ffff;
      width: 30%;
    }

    .right {
      background-color: #6f7180;
      width: 30%;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

上面我们定义了一个父容器container，下面有两个子容器left和right，分别子容器的宽度为50%。效果如下图：

MG5GYN5`CFAFUAH3MM6A7.jpg

从上面可以看出，块容器是独占一行的，所以left和right都独占一行。这就是left和right没有浮动之前的样式。下面我们给left加上左浮动，right加上右浮动。CSS代码改变后如下：

.left {
  background-color: #00ffff;
  width: 30%;
  float: left;
}

.right {
  background-color: #6f7180;
  width: 30%;
  float: right;
}

效果图如下：

SROX8PIB21~5J1OCBQ.jpg

从上面的效果图我们可以看出，left和right两个容器是各自浮动到了自己所在的位置，但是我们却没有看到红色背景的container容器。这个父容器去哪里了呢？其实我们开始可以为父容器设置一个边框就可以看出，父容器到最顶部去了，高度塌陷了，这是为什么呢？这就是子容器浮动后脱离了标准流，所以父容器高度就没了。这样我们的布局就乱了，如何整改这个问题呢？那么就是我们将要说的：CSS清除浮动。

1、隔墙法

什么是隔墙法呢？其实隔墙就是在父容器里的被浮动后的元素后面加上一个div容器来清除浮动。这种方式是最简单的清除浮动的方式，但是这个方式缺点就是如果整个页面都有很多浮动块，那么我们都需要去加上这个div来清除浮动。后面我们会讲一种通用的方式，下面我们首先来看这个方式如何实现：

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div style="clear:both;"></div>
</div>

从上面我们可以看出，我们就在container容器最后加上了

这样一句代码，这样我们就完成了清除浮动。效果图如下：

TM_OGH1V`~AIPT7ISB.jpg

从上面可以看出，红色背景的父容器container出来了。下面我们介绍第二种方式

2、父容器使用overflow: hidden

这种方式代码量也很少，也就是超出部分就隐藏，这种方式也能处理浮动。下面是代码的修改：

<div class="container" style="overflow: hidden;">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

我们在父容器的container上加上了样式：style=“overflow: hidden;”。效果图如上

3、父容器使用伪类:after跟zoom【推荐】

这种清除浮动的方式是很多框架和网站都使用的，兼容性极好。zoom是IE专有属性，可解决ie6,ie7浮动问题，IE8以上和非IE浏览器才支持伪类:after。缺点就是代码比较多，需要伪类:after跟zoom一起使用才能兼容所有主流浏览器。但推荐使用，可将改样式定义为公共样式，减少代码量。清除只需要给父元素加上class即可。代码如下：

#样式部分

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

.clearfix {
  zoom: 1;
}

#html部分

<div class="container clearfix">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

效果图还是如上图

  从以上三种方式来看，推荐使用第三种方式来进行清除浮动。但是隔墙法清除浮动还有一定的用处，隔墙可以不拘于布局的限制，只要隔开了，后面又可以继续写其他的容器，而不会被移动的最上面去(如果还有空白区域)。后面两种加上其他内容就会移动到上面去。这个大家可以自己做实验，就在right容器后再加上一个div容器填充内容即可，但是left和right容器不能把宽度设置为50%，必须预留部分空白区域。如下面的代码：

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div style="clear: both;"></div>
  <div>content</div>
  <div class="left">left</div>
  <div class="right">right</div>
  <div style="clear: both;"></div>
</div>

相同类型文章

热门标签

每日一句

    万种思量，多方开解，只恁寂寞厌厌地，系我一生心，负你千行泪。

    ——柳永

今日排行

  • 数轴上两点间的距离公式及中点公式

    数轴上两点间的距离公式及中点公式

  • 嗨！Tauri

    Tauri 是一个框架，用于为所有主要桌面平台构建小巧、快速的二进制文件。开发人员可以集成任何可编译为 HTML、JS 和 CSS 的前端框架，以构建他们的用户界面。应用程序的后端是一个基于 Rust 的二进制文件，带有一个前端可以与之交互的 API。 Tauri 应用程序的用户界面目前在 macOS 和 Windows 上利用 tao 作为窗口处理库，在 Linux 上通过 Tauri 团队孵化和维护的 WRY 利用 WebKit、Windows 上的 WebView2 和 Linux 上的 WebKitGTK 创建一个统一的系统 webview（和其他好东西，如菜单和任务栏）接口。

  • Flutter开发windows桌面应用处理WebView相关问题

    Flutter开发windows桌面应用处理WebView相关问题

  • 圆锥最短路径问题

    解决圆锥侧面最短路径问题，主要就是将侧面进行展开，转化为展开面两点连线的最短长度来进行解决。

  • yarn、npm配置阿里云国内镜像（新镜像）

    nodejs中使用npm和yarn，使用最新阿里云镜像 aliyun mirror，网上很多还是文章用的是下面这个地址~~yarn config set registry https://registry.npm.taobao.org~~

点击排行

友情链接