CSS清除浮动的方法

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

相同类型文章

热门标签

每日一句

    如果一个人没国家民族观念，即使富有，也实在令人惋惜。

    ——李嘉诚

今日排行

  • Electron打包错误“Error: Application entry file ..”解决方案

    打包出现如下错误：Error: Application entry file "dist\electron\main.js" in the "D:\gui\demo2\build\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.

  • Electron页面跳转、浏览器打开链接和打开新窗口

    Electron页面跳转、浏览器打开链接和打开新窗口

  • OpenCV-Python图像阈值分割

    从一副图像中利用阈值分割出我们需要的物体部分（当然这里的物体可以是一部分或者整体）。这样的图像分割方法是基于图像中物体与背景之间的灰度差异，而且此分割属于像素级的分割。

  • OpenCV-Python图像类型转换

    OpenCV-Python图像类型转换是用cv2.cvtcolor()函数，用于将图像从一个颜色空间转换为另一个颜色空间。它的参数包括输入图像、目标颜色空间和转换方式。例如，将RGB图像转换为灰度图像可以使用cv2.COLOR_RGB2GRAY作为转换方式。

  • 圆锥最短路径问题

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

点击排行

友情链接