<!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. js apply和call区别

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. python exec和eval

    exec语句用来执行储存在字符串或文件中的Python语句.例如,我们可以在运行时生成一个包含Python代码的字符串,然后使用exec语句执行这些语句.下面是一个简单的例子. >>> ...

  3. iOS开发－drawRect方法小技巧（超短）

    获取画布: CGContextRef context = UIGraphicsGetCurrentContext(); 设置颜色的三种方法: [[UIColor blueColor] setStrok ...

  4. redis主从和主从切换

    redis数据量增加,导致内存不够用,要迁移分离redis和程序: 1. 在新redis服务器上,启动一个redis实例,配置和master配置一致,不同的是配置文件中修改并启用 slave-read ...

  5. 论C++STL源代码中关于堆算法的那些事

    关于堆,我们肯定熟知的就是它排序的时间复杂度在几个排序算法里面算是比較靠上的O(nlogn)常常会拿来和高速排序和归并排序讨论,并且它还有个长处是它的空间复杂度为O(1), 可是STL中没有给我们提供 ...

  6. Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle

    Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3.  ...

  7. 常用的Http组件

    日常生活中,我们接触最多的Http组件就是浏览器了!但是,还有其他也很重要的组件,下面容我慢慢盘点: 1.代理服务器 代理服务器就是帮助我们发送请求报文,接受响应报文的服务器.对web服务器而言,代理 ...

  8. css之常用属性

    背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部 ...

  9. 修改PHP session 默认时间方法

    修改三行如下: 1.session.use_cookies把这个的值设置为1,利用cookie来传递sessionid 2.session.cookie_lifetime这个代表SessionID在客 ...

  10. Pairs Forming LCM 在a,b中(a,b<=n)(1 ≤ n ≤ 10^14),有多少组(a,b) (a<b)满足lcm(a,b)==n; lcm(a,b)=p1 ^ max(a1,b1) * p2 ^ max(a2,b2) *..........*pn ^ max(an,bn)

    转自:http://www.cnblogs.com/shentr/p/5285407.html http://acm.hust.edu.cn/vjudge/contest/view.action?ci ...