<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

     .wrapper{

         border: 20px solid black;

     }

     .content{

         float: left;

         width: 100px;

         height: 100px;

         background-color: #bbb;

         color: black;

         font-size: 50px;

         margin-left: 20px;

         margin-bottom: 20px;

         line-height: 100px;

         text-align: center;

     }

 </style>

 <body>

     <div class="wrapper">

         <div class="content">1</div>

         <div class="content">2</div>

         <div class="content">3</div>

         <div class="content">4</div>

         <div class="content">5</div>

         <div class="content">6</div>

         <div class="content">7</div>

         <div class="content">8</div>

     </div>

 </body>

 </html>

显示效果如下图

由于方块元素产生了浮动流，所以外面的wrapper无法包裹里面的元素，如何做到清除浮动流，让wrapper包裹里面的元素呢，形成如下图形？下面介绍几种方法。

方法1：在content的最后一个元素后面添加一个块元素（p div ul li ol form address），块元素上添加clear。

不足：虽然能够满足要求，但是由于引入了新的元素（标签）破坏了整体的结构，所以不推荐。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    .wrapper{

        border: 20px solid black;

    }

    .content{

        float: left;

        width: 100px;

        height: 100px;

        background-color: #bbb;

        color: black;

        font-size: 50px;

        margin-left: 20px;

        margin-bottom: 20px;

        line-height: 100px;

        text-align: center;

    }

    p{

        clear: both;

    }

</style>

<body>

    <div class="wrapper">

        <div class="content">1</div>

        <div class="content">2</div>

        <div class="content">3</div>

        <div class="content">4</div>

        <div class="content">5</div>

        <div class="content">6</div>

        <div class="content">7</div>

        <div class="content">8</div>

        <p></p>

    </div>

</body>

</html>

方法2：利用伪元素清除浮动流

思考：为什么不能利用content上的伪元素清除浮动流。

伪元素after是内容的最后部分，如果利用content伪元素after只能清除content内容的浮动流，无法清除content后的浮动流，所以没法达到目的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    .wrapper{

        border: 20px solid black;

    }

    .content{

        float: left;

        width: 100px;

        height: 100px;

        background-color: #bbb;

        color: black;

        font-size: 50px;

        margin-left: 20px;

        margin-bottom: 20px;

        line-height: 100px;

        text-align: center;

    }

    .wrapper::after{

        content: "";

        clear: both;

        display: block;

    }

</style>

<body>

    <div class="wrapper">

        <div class="content">1</div>

        <div class="content">2</div>

        <div class="content">3</div>

        <div class="content">4</div>

        <div class="content">5</div>

        <div class="content">6</div>

        <div class="content">7</div>

        <div class="content">8</div>

    </div>

</body>

</html>

方法3：让wrapper触发BFC，触发BFC的方法有如下三种。

float：left/right

position:absolute;

display:inline-block;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    .wrapper{

        float: left;

        /*position: absolute;*/

        /*display: inline-block;*/

        border: 20px solid black;

    }

    .content{

        float: left;

        width: 100px;

        height: 100px;

        background-color: #bbb;

        color: black;

        font-size: 50px;

        margin-left: 20px;

        margin-bottom: 20px;

        line-height: 100px;

        text-align: center;

    }

</style>

<body>

    <div class="wrapper">

        <div class="content">1</div>

        <div class="content">2</div>

        <div class="content">3</div>

        <div class="content">4</div>

        <div class="content">5</div>

        <div class="content">6</div>

        <div class="content">7</div>

        <div class="content">8</div>

    </div>

</body>

</html>

CSS如何清除浮动流的多种方案的更多相关文章

  1. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  3. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  4. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  5. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  8. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  9. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

随机推荐

  1. lodash map

    _.map(collection, [iteratee=_.identity]) 创建一个经过 iteratee 处理的集合中每一个元素的结果数组. iteratee 会传入3个参数:(value, ...

  2. 学习使用master.dbo.spt_values表

    如果要生成的临时表中有个连续的数字列,或者连续的日期列,如下所示: 2012-1-1 2012-1-2 2012-1-3 ... ... 可以这样写: declare @begin datetime, ...

  3. RHEL 5.4下部署LVS(DR)+keepalived实现高性能高可用负载均衡(转)

    一.简介 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一. ...

  4. iOS 提示更新 业务逻辑

    1, 当程序启动,先去APPstore 检查有没有新版本.没有新版本就不提示,有新版本才提示. 2,只有当有提示了,再去判断是强制更新还是普通提示. 3,当后台给返回要强制更新时,就给出提示,并且没有 ...

  5. Atitit. atiJavaExConverter4js  新的特性

    Atitit. atiJavaExConverter4js  新的特性 1.1. V1新特性1 1.2. V2 新特性1 2. Keyword1 3. Catch1 4. Convert n Thro ...

  6. Angularjs学习笔记7_directive1

    1.基础知识 directive()接受两个参数 · name:字符串,指令的名字 · factory_function:函数,指令的行为 应用启动时,以name作为该应用的标识注册factory_f ...

  7. 转：关于安卓多线程while(true)方法占用CPU高的原因及其解决方法

    由于项目需要用到安卓多线程操作,结果开了四条线程,下载到平板一直很卡,CPU占用率暴涨.于是开始查找原因,发现是线程run()方法里的while(true)导致的, 下图是为解决时开启一条while( ...

  8. TCP/IP的三次握手与四次挥手详解

    TCP((Transmission Control Protocol)传输控制协议,是一个面向连接的协议.在运用此协议进行数据传输前都会进行连接的建立工作(三次握手):当数据传输完毕,连接的双方都会通 ...

  9. virtualenv下使用matplotlib

    Unable to “import matplotlib.pyplot as plt” in virtualenv   (PyMVPA) SimilarFacedeMacBook-Pro:PyMVPA ...

  10. Vue 组件4 动态组件

    动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...