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

时间  2019-11-16
标签 第五 web 前端 float 几种 清除 浮动 方式 栏目 HTML 繁體版
原文   原文链接

前端之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的颜色属性没法展现出来。html

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，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。web

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标签将不会影响父标签的撑开。app

推荐使用这种方式

 
分类:  web
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程