前端之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>

<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 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>

<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>

<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> ...

随机推荐

[转贴]怎样在LINQ实现 LEFT JOIN 或者RIGHT JOIN
In this post let us see how we can handle Left Join and Right Join when using LINQ. There are no key ...
4.android.mk编写规范
Android.mk是Android提供的一种makefile文件,用来指定诸如编译生成so库名.引用的头文件目录.需要编译的.c/.cpp文件和.a静态库文件等.要掌握jni,就必须熟练掌握Andr ...
redhat下升级gcc编译器
在有网络的环境下,采用下载gcc源码进行编译的方式升级gcc版本,所以需要本身已有gcc编译器. 获取 gcc-4.9.2的包: wget http://gcc.skazkaforyou.com/re ...
C#获取文件的当前路径
C#获取文件的当前路径 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2.Syst ...
☀【CSS3】icon
Navicon Transformicons: Animated Navigation Icons with CSS Transformshttp://sarasoueidan.com/blog/na ...
PrintWriter out = response.getWriter() 输出中文乱码问题
HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncod ...
MySQL 数据库引擎
MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型I ...
南阳acm奇偶数分离
这道题的特殊要求是要先先限定了测试数据的组数,所以多加一条循环语句.下面是已通过的代码: #include<stdio.h> main() { int n,m,i,j; ...
.net 码农转战 iOS - 初探
好久没写博客了,之前还打算把毕业设计中涉及到的两个算法拿出来说说(脸型分析 + 声音分析),博文都写了一半了,后来实在太忙了,那篇随笔也就沉在草稿列表中没动过. 我原先是专职 .net 开发的,在公司 ...
hyperVisor
当前主要的hyperVisors:VMware vSphere.微软Hyper-V.Citrix XenServer .IBM PowerVM.Red Hat Enterprise Virtuliza ...

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

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

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

本节内容

1.float清除方式1

2.float清除方式2

3.float清除方式3

4.float清除方式4

推荐使用这种方式

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

随机推荐

热门专题