前端之float的几种清除浮动方式

本节内容

  • 1.float清除方式1
  • 2.float清除方式2
  • 3.float清除方式3
  • 4.float清除方式4

1.float清除方式1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="content">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

    </div>

    <div style="clear: both">asdf</div>

</body>

</html>

　　

在父div的下面div中设置clear:both方式，content的div没有被撑起来，高度还是0，但是下面的asdf排在了最下面，缺点是外部的div高度为0，则外部div的颜色属性无法展示出来。

2.float清除方式2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="content">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div style="clear: both"></div>

    </div>

    <div>asdf</div>

</body>

</html>

　　

在所有浮动标签的最后一个标签后面加上一个空标签，里面的style设置为clear:both，这样就把父div撑起来了。但是如果想在父div中添加新的浮动标签将可能出现问题，因为append新元素进去之后，空标签可能就不在最后一个位置了。

3.float清除方式3

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="content" style="overflow: hidden">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

    </div>

    <div>asdf</div>

</body>

</html>

　　

在父标签中设置style为overflow: hidden也能将父标签撑起来，hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

4.float清除方式4

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

        .clearfix:after{

            content: ".";  /*设置内容，必须有内容，没有，则无法实现效果*/

            visibility: hidden;  /*将标签隐藏*/

            height:0;  /*设置标签的高度为0*/

            display: block;  /*设置标签为块级标签*/

            clear: both;  /*设置清除float浮动*/

        }

    </style>

</head>

<body>

    <div class="content clearfix">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

    </div>

    <div>asdf</div>

</body>

</html>

　　

第四种方式是在父标签上面建一个伪类，设置如上面那样，这样将能够撑起父div标签，并且动态在里面添加float标签将不会影响父标签的撑开。

推荐使用这种方式

前端之float的几种清除浮动方式的更多相关文章

  1. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  2. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  3. HTML连载50-伪元素选择器、清除浮动方式五

    一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...

  4. CSS3中三种清除浮动（float）影响的方式

    float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...

  5. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  6. css 关于浮动float的使用以及清除浮动

    float:none | left | right 默认值:none 适用于:所有元素 none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边 当该属性不等于none引起对象浮 ...

  7. css 3种清除浮动方法

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  8. css 盒模型 文档流 几种清除浮动的方法

    盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border   content-box:此值为其默认值,其 ...

  9. 7种清除浮动 （感觉br最好用然而我用的还是overflow）

    1.clear清除浮动(添加空div法) 在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden;} 2.方法:给浮动元素父级设 ...

随机推荐

  1. DotNet 资源大全中文版（Awesome最新版）

    Awesome系列的.Net资源整理.awesome-dotnet是由quozd发起和维护.内容包括:编译器.压缩.应用框架.应用模板.加密.数据库.反编译.IDE.日志.风格指南等. 算法与数据结构 ...

  2. 使用TypeScript拓展你自己的VS Code！

    0x00 前言 在前几天的美国纽约,微软举行了Connect(); //2015大会.通过这次大会,我们可以很高兴的看到微软的确变得更加开放也更加务实了.当然,会上放出了不少新产品和新功能,其中就包括 ...

  3. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  4. PHP实现全排列（递归算法）

    算法描述:如果用P表示n个元素的全排列,而Pi表示n个元素中不包含元素i的全排列,(i)Pi表示在排列Pi前面加上前缀i的排列,那么n个元素的全排列可递归定义为:    ① 如果n=1,则排列P只有一 ...

  5. C++程序员如何转Java

     C++程序员如何转Java 忙里偷闲,到了这个时间终于得空写一篇早想写的文章.其实本文的标题有些不太准确,C++程序员写Java代码不是说就非得转行写Java,抛弃C++,而只是多了一个选择而已.两 ...

  6. request 对象和 response 对象

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象 HttpServletResponse HttpServletR ...

  7. JavaScript RegExp 基础详谈

    前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...

  8. asp.net结合uploadify实现多附件上传

    1.说明 uploadify是一款优秀jQuery插件,主要功能是批量上传文件.大多数同学对多附件上传感到棘手,现将asp.net结合uploadfiy如何实现批量上传附件给大家讲解一下,有什么不对的 ...

  9. java多线程实现方式

    一.什么是线程? 线程:程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的基本单位. 多线程:单个程序中同时运行多个线程完成不同的工作,称为多线程. 特 ...

  10. 设计模式-策略模式（Strategy Model）

    1.概述     在开发过程中常常会遇到类似问题,实现一个功能的时候往往有多种算法/方法(策略),我们可以根据环境的不同来使用不同的算法或策略来实现这一功能.     如在人物比较排序的实现中,我们有 ...