<!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. POJ1274：The Perfect Stall（二分图最大匹配 匈牙利算法）

    The Perfect Stall Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17895   Accepted: 814 ...

  2. 《Java程序猿面试笔试宝典》之Statickeyword有哪些作用

    statickeyword主要有两种作用:第一,仅仅想为某特定数据类型或对象分配单一的存储空间,而与创建对象的个数无关.第二,希望某个方法或属性与类而不是对象关联在一起,也就是说,在不创建对象的情况下 ...

  3. iOS UIButton文字和图片间距随意调整

    代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...

  4. Android设置拍照或者上传本地图片

    效果例如以下: 看代码: MainActivity类中: package com.example.ceshidemo; import java.io.ByteArrayOutputStream; im ...

  5. 自定义ios NSLog

    #ifdef DEBUG #define MyLog(FORMAT, ...) fprintf(stderr,"Time:%s\t File:%s\t Methods:%s\t Line:% ...

  6. c++opencv项目移植到Android（Mat—》IplImage*）

    近期将PC机上的行人检測的C++项目移植到Android平台遇到非常多的问题.因此,记录一些重点. 1. 最好能够參照Opencv sample 里面的mix-processing. 2. 数据结构的 ...

  7. webpack 环境搭建基础框架

    一.安装babel相关 1,安装依赖 cnpm i -D babel-core babel-loader babel-preset-env babel-preset-stage- babel-plug ...

  8. sublime test3 安装及配置

    操作系统: Ubuntu16.04 注: 除下载及安装外,其他配置不限操作系统 1. 下载及安装 官网:https://www.sublimetext.com/ 进入官网 点击 INSTALL FOR ...

  9. iOS SDK具体解释之NSCopying协议

    原创blog,转载请注明出处 http://blog.csdn.net/hello_hwc?viewmode=contents 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn ...

  10. You don't have permission to access javascript on this server

    今天访问遇到一个很奇怪的问题,在本地测试 http://localhost:9012/javascript/, 报错: Forbidden You don't have permission to a ...