CSS清除浮动的方法

xiaohai 2018-09-01 10:35:23 共3470人围观 标签： 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>

相同类型文章

热门标签

每日一句

    女人可以令你的生活幸福如天堂，也可以令你的生活艰苦如地狱。

    ——古龙

今日排行

  • Docker镜像latest标签的误导

    在使用Docker时，经常会犯一个错，误以为latest镜像会自己更像到最小版本，其实这样理解是有问题的，latest就是一个标签，没有自动更新到最新版本的功能，本文就是对latest标签进行介绍。

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

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

  • 音乐推荐《是妈妈是女儿》

    《是妈妈是女儿》聚焦母女间未曾言明的爱意，以书信对话的形式呈现出各自的内心独白，表达彼此的牵挂。黄绮珊与希林娜依·高用跨越时空、打开心扉、深情对唱的形式，将天下母女爱的寄语化作心灵的倾诉。黄绮珊的每一句话，每一个字都演绎出了妈妈对女儿的爱，而希林依娜·高把女儿对妈妈的爱由不理解到理解再到感恩演绎得淋漓尽致。

  • 微信小程序支持Markdown的解析库Towxml和搭建公式流程图渲染服务

    Towxml 是一个让小程序（微信/QQ）可以解析Markdown、HTML的解析库。能够使小程序完美解析Markdown内容。

  • 推荐一款Markdown编辑器

    Editor.md 是一个可嵌入的开源 Markdown 在线编辑器组件，你可以很方便用在浏览器、NW.js（Node-webkit）等地方，基于CodeMirror、jQuery 和 Marked 构建。

点击排行

友情链接