第五篇: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> ...
随机推荐
- 使用AspNetPager与GridView完成分页
使用AspNetPager与GridView完成分页 由于GridView的分页功能实在是太弱了,所以需要使用强大的AspNetPager来作为分页控件.最简单的办法就是GridView控件下面接 ...
- 2016年如果还没有关注这些机器人公司,你就out了
芯师爷语据 知名市场研究机构IDC发布报告称,预计到2019年,全球机器人及相关服务上的投入将达到1350亿美元,较2015年的710亿美元增长近一倍.报告称,机器人相关投资预计将以每年17%的速度增 ...
- 2.6.2 Notification的功能与用法
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...
- VS2012中使用纯C实现COM的小问题
用VS2012新建C++工程都预定义了宏__cplusplus,所以引用到的都是C++的定义.但是要用C实现的话,一般都是也就不是C++的了.比如以下代码: #undef INTERFACE #def ...
- C# 读取网络txt文件 并写在本地txt文件中
public void WriteStream() { try { stirng ImagesPath = ImagesPath + "\\2013-09-27.txt"; Htt ...
- dump 验证实例恢复的起点和终点
什么时候会产生实例恢复呢?当你数据库服务器异常断电,重启数据库就会发生实例恢复.实例恢复是由数据库自动完成的,无须DBA的干涉.当然这里有个前提条件:数据文件. 在线日志文件.控制文件不得有损坏. 我 ...
- xcode5.1 armv7 armv7s arm64 类型, 区分, 概念等
官方: https://developer.apple.com/library/ios/documentation/General/Conceptual/CocoaTouch64BitGuide/In ...
- C#程序部署到Android
C#是一种优秀的编程语言,语法之优雅,代码之简洁使得众多软粉多年来对她不离不弃. 但是如何将C#程序部署到Linux, Android等平台,这当然是得依靠众所周知的Mono. 本文Demo程序比较简 ...
- dos攻击与防御
SYN Flood攻击 标准的TCP三次握手过程如下: 客户端发送一个包含SYN标志的TCP报文,SYN即同步(Synchronize),同步报文会指明客户端使用的端口以及TCP连接的初始序号: 服 ...
- Firefox添加插件支持修改Headers
安装以下插件,Firefox就可以修改Headers: 安装成功后,会在左下角出现一个这样的图标,点击这个图标就可以随意修改Headers的参数了.