<!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. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  2. C++第4次实验（基础班）—循环结构程序设计

    此次上机中的4个题目项目6.项目7(选1)必做.其他2两题可从剩下的项目中选,也可从项目7中选. [项目1:利用循环求和]求1000以内全部偶数的和(答案:250500) 要求:请编出3个程序来,分别 ...

  3. 判断一个字符串是否为合法IP

    输入任意一个字符串,判断是否为合法IP bool IsIPAddress(const char * str){ //先判断形式是否合法, //检查是否只包含点和数字 ; str[i] != '\0'; ...

  4. React Native Android入门实战及深入源代码分析系列（2）——React Native源代码编译

    本文为老曾原创.转载需注明出处:viewmode=contents">http://blog.csdn.net/minimicall?viewmode=contents 在上一节中,我 ...

  5. android-pull方式解析xml文件以及XML文件的序列化

    android解析XML ---------------------------基础要像磐石 在android平台上可以使用SAX.DOM和自带的Pull解析器解析xml文件,本文主要介绍使用pull ...

  6. js使用ctrl+s保存表单提升用户体验

    本质上是监控ctrl+s 然后触发相应事件 <script language="JavaScript"> //Ctrl+s保存 document.onkeydown=f ...

  7. 安装ecshop默认安装后的错误解决方案

    1,统一解决 php.ini中的配置 error_reporting = E_ALL | E_STRICT 这是说,显示那些不符合编码规范的警告(coding standards warnings). ...

  8. 贯通tomcat --- 电子书

    http://www.educity.cn/jiaocheng/j10865.html 第1章 认识Tomcat [本章导读] Tomcat服务器是一个免费的开放源代码的Web应用服务器.它是Apac ...

  9. 【HDU-5246】超级赛亚ACMer（贪心）

    之前用了个nlogn的算法超时了.仅仅能改成n的算法了 大题贪心思路就是 对每一个人的能力值从小到大进行排序,当前能力值为now,那么我们找到一个人的能力使得这个能力值 <= now.now + ...

  10. ResultSet详解(转)

      ResultSet用法集锦 结果集(ResultSet)是数据中查询结果返回的一种对象,可以说结果集是一个存储查询结果的对象,但是结果集并不仅仅具有存储的功能,他同时还具有操纵数据的功能,可能完成 ...