第五篇:web之前端之float的几种清除浮动方式
前端之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之前端之float的几种清除浮动方式的更多相关文章
- 前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...
- HTML连载50-伪元素选择器、清除浮动方式五
一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...
- 【Python之路】第十五篇--Web框架
Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf- ...
- css 关于浮动float的使用以及清除浮动
float:none | left | right 默认值:none 适用于:所有元素 none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边 当该属性不等于none引起对象浮 ...
- CSS3中三种清除浮动(float)影响的方式
float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...
- CSS3中三种清除浮动(float)的方法
方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height:; height:; overflow:hidden; } 方法二:父级div定义 overf ...
- CSS3中为什么要清除浮动以及三种清除浮动(float)的方法
方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二:父级div定义 o ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:清除浮动
<!DOCTYPE html> <html> <head> <title>Bootstrap .clearfix 实例</title> &l ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:清除浮动1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 抽象工厂模式[wiki]
抽象工厂[编辑] 维基百科,自由的百科全书 跳转至: 导航. 搜索 以统一塑模语言中的类型图来表示抽象工厂 抽象工厂模式(英语:Abstract factory pattern)是一种 ...
- 【Android 复习】 : Activity之间传递数据的几种方式
在Android开发中,我们通常需要在不同的Activity之间传递数据,下面我们就来总结一下在Activity之间数据传递的几种方式. 1. 使用Intent来传递数据 Intent表示意图,很多时 ...
- linux下阅读源代码的工具
说来真是惭愧呀.一直在用VIM 做开发.却不知道VI 里还有这么好使的工具.以前一直都是用: find -type f -print | xargs grep -i **** 在源代码里查找. 原来L ...
- linux中替换目录下的某个文件中包含的IP地址
#!/bin/bash #set -x oldIP=172.17.39.135 newIP=172.17.98.115 homefile=/usr/local/ims/ filelist=`grep ...
- android camera(一):camera模组CMM介绍
一.摄像头模组(CCM)介绍: 1.camera特写 摄像头模组,全称CameraCompact Module,以下简写为CCM,是影像捕捉至关重要的电子器件.先来张特写,各种样子的都有,不过我前一段 ...
- [ZETCODE]wxWidgets教程二:辅助类
本教程原文链接:http://zetcode.com/gui/wxwidgets/helperclasses/ 翻译:瓶哥 日期:2013年11月27日星期三 邮箱:414236069@qq.com ...
- MySQL开启远程链接(2014.12.12)
MySQL默认是关闭远程链接的,只能通过localhost访问本地数据库 如果不是本地访问就需要打开MySQL的远程连接: 基本步骤其实很简单: 1.进入mysql 2.依次运行下面的命令(黄色的为命 ...
- XPath在asp.net中查询XML -摘自网络
.NET Framework 2.0中可以使用System.Xml.XPath命名空间下的类对XML文档进行基于路径的查询,在查询过程中需要构造类似SQL的查询字符串,该字符串遵循XPath语法.它由 ...
- weekend110(Hadoop)的 第二天笔记
(2015年1月11日) 课程目录 01-NN元数据管理机制 02-NN工作机制2 03-DN工作原理 04-HDFS的JAVA客户端编写 05-filesystem设计思想总结 06-hadoop中 ...
- 武汉Uber优步司机奖励政策(2月1日~2月7日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...