先来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。

　　理想的效果：可实际的效果：

这个地方就涉及到浮动，因为两个父元素div都没有高度（或者小于子元素的高度），所以不能给浮动的孩子一个容器，所以后边的li还拼命的往上面的最后一个li靠近。

清除浮动就是要给父元素加一个大于等于子元素高度的高度。

1、清除浮动：给父元素一个高度，让其子元素在父元素中浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。

2、清除浮动：在工作中，大部分父元素是不给高度的，因为子元素的高度可以撑起父元素的高度。那么不写高度还要清除浮动的影响就要开启一种新方法，使用clear:both;去清除浮动的影响。例如：

　　

<!DOCTYPE html>

<html>

  <head>

    <title>清除浮动</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style type="text/css">

        *{margin:0;padding:0;}

        li{

            float:left;

            width:140px;

            height:40px;

            background:blue;

        }

        .box{clear:both;}

    </style>

  </head>

  <body>

   <div>

           <ul>

               <li>HTML</li>

               <li>CSS</li>

               <li>JS</li>

               <li>AJAX</li>

           </ul>

   </div>

   <div class="box">

           <ul>

               <li>英语</li>

               <li>数学</li>

               <li>体育</li>

           </ul>

   </div>

  </body>

</html>

实际效果：

此时已经清除了浮动，但是，你去设置第二个盒子的margin-top:10px;时，会发现margin失效了，根本就不能让他们有间隔。此时就需要第三种方法了。

3、隔墙法

　　虽然他们不能用margin设置间隔，但是我们可以再两个盒子之间再加上一个盒子，用这个盒子去撑起一个间隔，就像一堵墙。

<!DOCTYPE html>

<html>

  <head>

    <title>清除浮动</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style type="text/css">

        *{margin:0;padding:0;}

        li{

            float:left;

            width:140px;

            height:40px;

            background:blue;

        }

        .cl{

            clear:both;

            height:18px;

        }

    </style>

  </head>

  <body>

   <div>

           <ul>

               <li>HTML</li>

               <li>CSS</li>

               <li>JS</li>

               <li>AJAX</li>

           </ul>

   </div>

   <div class="cl"></div>

   <div class="box">

           <ul>

               <li>英语</li>

               <li>数学</li>

               <li>体育</li>

           </ul>

   </div>

  </body>

</html>

实际效果：

4、内墙法（这个特别有用，这样的话就不用设置父元素的高，而且比较智能的修改父元素的高，这样的话，父元素的背景就可以智能 的修改高度了。）

　　就是把上例中的外墙放到第一个div里面。这个时候会出现一个特性，看如下代码：

<!DOCTYPE html>

<html>

    <style type="text/css">

        *{margin:0;padding:0;}

        div{

            background:green;

        }

        p{

            float:left;

            width:100px;

            height:40px;

            background:blue;

        }
　　　　　.cl{
　　　　　　　　clear:both;
　　　　　}

    </style>

  </head>

  <body>

   <div>

           <p></p>
　　　　　　<!-- <div class="cl"></div>-->

   </div>

  </body>

</html>

先分析下这段代码，这个结果会因为p的脱标而只显示p的背景色，可是如果我们加上一个内墙，即<div class="cl"></div>，会因为浮动的清除而撑起父元素的高。

未清除浮动的效果：

清除浮动的效果：

归根结底：一个父元素不能被脱标的儿子撑起一个高度，但是清除浮动后，脱标地儿子也可以撑起父元素的高度。如下图可以当做一个公式来记忆。

5、overflow:hidden;清除浮动。

　　本意是移除边框的东西给他清除掉，但是他可以用来做一些偏方。一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了并且margin也会有效了。这是一个偏方。请看如下代码：

<!DOCTYPE html>

<html>

  <head>

    <style type="text/css">

        *{margin:0;padding:0;}

        div{

            border:10px solid black;

            overflow:hidden;

        }

        .p1{

            float:left;

            width:40px;

            height:140px;

            background:blue;

        }

        .p2{

            float:left;

            width:40px;

            height:240px;

            background:yellow;

        }

        .p3{

            float:left;

            width:40px;

            height:80px;

            background:red;

        }

    </style>

  </head>

  <body>

   <div>

           <p class="p1"></p>

           <p class="p2"></p>

           <p class="p3"></p>

   </div>

  </body>

</html>

运行结果：

6、清除浮动的小例子：

　　

<!DOCTYPE html>

<html>

  <head>

    <style type="text/css">

        *{margin:0;padding:0;}

        div{

            width:400px;

            border:1px solid black;

            margin:20px auto;

        }

        div ul {

            list-style:none;

        }

        div ul li{

            border-bottom:1px dashed gray;

            overflow:hidden;

        }

        div ul li .title{

            float:left;

        }

        div ul li .date{

            float:right;

        }

    </style>

  </head>

  <body>

   <div>

           <ul>

               <li><span class="title">我是新闻1</span><span class="date">2016/7/25</span></li>

               <li><span class="title">我是新闻2</span><span class="date">2016/7/25</span></li>

               <li><span class="title">我是新闻3</span><span class="date">2016/7/25</span></li>

               <li><span class="title">我是新闻4</span><span class="date">2016/7/25</span></li>

               <li><span class="title">我是新闻5</span><span class="date">2016/7/25</span></li>

               <li><span class="title">我是新闻6</span><span class="date">2016/7/25</span></li>

           </ul>

   </div>

  </body>

</html>

如果没有li标签的overflow会因为li标签没有高度，而儿子span又是脱标的会撑不起li的高度。对li标签加上overflow之后就会使span撑起li标签的高度（一定是给父元素加）。另外，加overflow是最简单的，也可以使用内墙法，但是不可以在两个li标签之间用隔墙法，因为ul中除了li标签不能添加其他标签。

　　

CSS中的浮动清除的更多相关文章

  1. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  2. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  3. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  4. css3-9 css中的浮动怎么使用

    css3-9 css中的浮动怎么使用 一.总结 一句话总结:用来做一般的行效果,比如说手机左右分布的头部导航栏.浮动的东西放到一个div中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...

  5. 如何理解CSS中的浮动 ：其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

  6. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  7. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

  8. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

  9. css 中的浮动

    css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...

随机推荐

  1. Ansible9：条件语句【转】

    在有的时候play的结果依赖于变量.fact或者是前一个任务的执行结果,从而需要使用到条件语句. 一.when    有的时候在特定的主机需要跳过特定的步骤,例如在安装包的时候,需要指定主机的操作系统 ...

  2. 修改某个UITextField的键盘的返回键类型以及监听键盘的高度变化，取到键盘动画退出弹出的时间，一起随着键盘顶出来或者压下去，

    1.修改某个UITextField的键盘的返回键类型: [_bottomTextView setReturnKeyType:UIReturnKeyDone]; 1.1.textFied点击return ...

  3. json的引号之伤

    最近读他们的jquery解读的源码,由于版本不同,我可能看的是他们解读的1.7的,但是我本身运行的可能是1.9的,所以有些出处,但是中心思想不变,我有疑问的时候,直接debug,让例子自己走一遍,好处 ...

  4. nuget 服务器崩溃

    1,首先是500错误 2.服务器处理请求时遇到错误.异常消息为"对路径" bin"目录的访问被拒绝." 对bin目录添加User用户读写权限

  5. E212：无法打开并写入文件

    用vi编辑文件是  老师出现这样的错误 有些文件   需要root权限才能修改   切换成root权限就行了

  6. 【转】4G手机打电话为什么会断网 4G上网和通话不能并存原因分析

    与2G/3G相比,4G最大的特色就是提供了超过100Mbps的峰值速率,既然速度都可以秒掉20M的光纤固网了,那用来语音通话不就更是小菜一碟了吗?很遗憾,问题就出现在了这里. 由于目前的LTE网络(4 ...

  7. 【RMQ】 区间最值查询详解

    1. 概述 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A ...

  8. Form类的KeyPreview属性

    首先需要知道一个知识点,Form控件,Panel控件和GroupBox控件等容器类控件默认是不接收焦点的,而是负责管理容器中控件的焦点.当容器控件被选中时,默认把焦点传送至容器内Tab顺序为0的控件. ...

  9. 借助XShell，使用linux命令sz可以很方便的将服务器上的文件下载到本地，使用rz命令则是把本地文件上传到服务器。

    rz 是将window文件传到linux服务器上,到执行rz命令的目录 sz 可以将linux文件发送到windows上,可以选择目录. https://www.google.com/ncr 登录一下 ...

  10. ubuntu apache2 流量限制模块

    mod-bw is an Apache 2 module provided to solve the problem of limiting users’ and virtual hosts’ ban ...