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

 

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

本节内容

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

1.float清除方式1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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标签将不会影响父标签的撑开。

推荐使用这种方式

 
分类: web

第五篇：web之前端之float的几种清除浮动方式的更多相关文章

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

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

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

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

  3. 【Python之路】第十五篇--Web框架

    Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf- ...

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

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

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

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

  6. CSS3中三种清除浮动（float）的方法

    方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height:; height:; overflow:hidden; } 方法二:父级div定义 overf ...

  7. CSS3中为什么要清除浮动以及三种清除浮动（float）的方法

    方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二:父级div定义 o ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动

    <!DOCTYPE html> <html> <head> <title>Bootstrap .clearfix 实例</title> &l ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动1

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

随机推荐

  1. LinkedHashMap和HashMap的比较使用 由于现在项目中用到了LinkedHashMap，并不是太熟悉就到网上搜了一下。 ? import java.util.HashMap; impo

    LinkedHashMap和HashMap的比较使用 由于现在项目中用到了LinkedHashMap,并不是太熟悉就到网上搜了一下. import java.util.HashMap; import ...

  2. Android 获取SDCard上图片和视频的缩略图

    获取图片缩略图和视频缩略图的方法: Java代码: import java.io.File; import android.app.Activity; import android.graphics. ...

  3. WebBrowser控件跨域访问页面内容

    原文出处 :http://blog.csdn.net/nocky/article/details/6056802 源码出处:http://www.codecentrix.com/blog/wnd2do ...

  4. Linux的线程同步对象：互斥量Mutex，读写锁，条件变量

        进程是Linux资源分配的对象,Linux会为进程分配虚拟内存(4G)和文件句柄等 资源,是一个静态的概念.线程是CPU调度的对象,是一个动态的概念.一个进程之中至少包含有一个或者多个线程.这 ...

  5. Mac 下配置XAMPP

    1:去官方下载 2:安装dmg 3:安装完成后, 网页上提示, 要设置相应的密码, 设置完成. 4:打开对应的app程序, 把 mysql Database运行起来, 不然, 网页上看到的就是未运行状 ...

  6. Android优秀开源项目

    本文转自:http://blog.tisa7.com/android_open_source_projects Android优秀开源项目 Android经典的开源项目其实非常多,但是国内的博客总是拿 ...

  7. 算法 python实现(二) 冒泡排序

    首先说一下 冒泡排序 是怎么做的: 总体的想法是,把小的轻的浮上前面去,把大的重的沉到后面去. 这样设置两个指针,i j, 1. i标识每一趟循环.这一趟的目的是把后面那些未排序的数列中最小的浮上前面 ...

  8. jQuery技术内幕预览版.pdf1

    第一章 总体构架 jQuery模块可以分为3部分:入口模块.底层支持模块和功能模块 浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果,其它模块基于测试结果解决浏览器之间的兼容性问题 回调函 ...

  9. Bzoj 3295: [Cqoi2011]动态逆序对 分块,树状数组,逆序对

    3295: [Cqoi2011]动态逆序对 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2886  Solved: 924[Submit][Stat ...

  10. html背景为灰色 不能操作,中间div可以操作

    <container style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; z-index: ...