<!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. lombok使用总结

    前提 这篇文章主要介绍lombok的使用,至于lombok的源码和原理暂不探究,可以看上一篇文章插件化注解处理API去了解lombok的基本原理.参考资料: lombok官网 lombok官方教程-l ...

  2. Java 8 List

    排序 依据自定义对象的某个属性进行排序. List<Student> students = Arrays.asList(student1, student2, student3); stu ...

  3. 预装WIN8改装WIN7之BIOS设置

    不少预装WIN8/10的朋友觉得WIN8/10不好用,想改装WIN7,可改装之后常常出现各种问题,甚至不能启动,往往是BIOS设置不当. 本文以联想小新V2000 预装WIN8.1中文版为例,说说WI ...

  4. popupwindow从底部弹出

    参考了网上的一些代码,自己写了个类,上代码 /** * Created by Lee on 2016/2/26. */ public class CameraPopupWindow { private ...

  5. win10 环境下 MinGW-w64安装

    MinGW-w64 就是 著名C/C++编译器GCC的Windows版本. 一.什么是 MinGW-w64 ?MinGW 的全称是:Minimalist GNU on Windows .它实际上是将经 ...

  6. 【JavaScript】JavaScript DOM 编程

    在开发的时候,最主要是对DOM进行操作.DOM:Document Object Model 文本对象模型. DOM能够以一种独立于平台和语言的方式訪问和改动一个文档的内容和结构. DOM是针对xml( ...

  7. java序列化，二进制和数据流

    类的序列化需要支持Serializable接口,如果类支持序列化,可以通过ObjectOutPutStream和ObjectInputStream将对象和Stream之间进行方便的转换. 首先来 看一 ...

  8. Windows.form增删改查

    主界面 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;usin ...

  9. iOS开发-常用第三方开源框架介绍

    iOS开发-常用第三方开源框架介绍 图像: 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网 ...

  10. CentOS卸载系统自带的OpenJDK

    查看目前系统的jdk: rpm -qa | grep jdk 得到的结果: $ rpm -qa | grep jdk java-1.6.0-openjdk-1.6.0.0-1.45.1.11.1.el ...