CSS清除浮动的方法

xiaohai 2018-09-01 10:35:23 共3472人围观 标签： 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编译出现:temporary error (try again later)

    Docker编译镜像出现：fetch http://dl-cdn.alpinelinux.org/alpine/v3.12/main/x86_64/APKINDEX.tar.gz ERROR: http://dl-cdn.alpinelinux.org/alpine/v3.12/main: temporary error (try again later) WARNING: Ignoring APKINDEX.2c4ac24e.tar.gz: No such file or directory问题

  • Golang编译打包Vue项目到二进制包

    Golang打包一般的静态资源文件到二进制文件中还是比较简单，但是如果遇到使用Vue编写的后台界面，该如何打包呢？本文就是记录如何打包Vue到二进制包

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

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

  • 平衡树(Balance Tree，BT)

    平衡树(Balance Tree，BT) 指的是，任意节点的子树的高度差都小于等于1。

  • frp安装并配置能web访问(Centos)

    frp 是一个专注于内网穿透的高性能的反向代理应用，支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。

点击排行

友情链接