【Web】网页清除浮动的方法
网页中，经常用浮动的div来布局，但是会出现父元素因为子元素浮动引起内部高度为0的问题，为了解决这个问题，我们需要清除浮动，下面介绍4中清除浮动的方法。
在CSS中，clear属性用户清除浮动，语法：选择器{ clear: left || right || both; };
方法一：额外标签法
在浮动元素末尾添加一个空的标签，如：<div style="clear: both"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="son1"></div>
<div class="son2"></div>
<!-- 额外标签法 -->
<div style="clear: both;"></div>
</div>
<div class="box2"> </div>
</body>
</html>
方法二：父级添加overflow属性法
给父级添加overflow属性，触发BFC的方式，可以实现清除浮动效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
overflow: hidden;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
</style>
</head>
<body>
<!-- 父级添加overflow属性法 -->
<div class="box1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"> </div>
</body>
</html>
方法三：使用after伪元素法
使用:after方式，为第一种方法的升级版。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
.clearfix:after {
content: "."; /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/
display: block;
height: 0; /*高度为0*/
visibility: hidden;/*隐藏盒子*/
clear:both;/*清除浮动*/
}
.clearfix {
*zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"> </div>
</body>
</html>
方法四：使用before和after双伪元素法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
.clearfix:before, .clearfix:after {
content: "";
display: table; /*可以触发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear:both;/*清除浮动*/
}
.clearfix {
*zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"> </div>
</body>
</html>
【Web】网页清除浮动的方法的更多相关文章
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- css清除浮动的方法总结
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 we ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
- 前端开发CSS清除浮动的方法有哪些？
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
随机推荐
- java面试题:jvm
jvm内存区域 Q:jvm内存怎么划分的? 答: 方法区(线程共享):各个线程共享的一个区域,用于存储虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据.虽然 Java 虚拟机规范把方法 ...
- 《深入理解java虚拟机》笔记
二.java内存区域与内存溢出异常 0.在内存管理领域,java与c/c++不同的是,在java虚拟机自动内存管理机制下,java不需要手动去为对象写配对的free内存的代码,不容易出现内存泄漏和内存 ...
- MongoDB之增删改查
MongoDB的默认端口为:27017 show dbs 查看所有的数据库 MySQL和MongoDB的对应关系 MySQL MongoDB DB DB 数据库 table Collection ...
- Mac安装MySQL数据库
一 下载及安装社区版MySQL和MySQL Workbench. 二 如果MySQL Workbench无法登陆,则系统偏好设置-MySQL-Initialize Database,选择legacy开 ...
- PTA 7-50 畅通工程之局部最小花费问题(最小生成树Kruskal)
某地区经过对城镇交通状况的调查,得到现有城镇间快速道路的统计数据,并提出“畅通工程”的目标:使整个地区任何两个城镇间都可以实现快速交通(但不一定有直接的快速道路相连,只要互相间接通过快速路可达即可). ...
- stark组件之pop操作【模仿Django的admin】
一.先看下什么django的admin的pop到底是个什么东西 其实就是这么一个东西, a.在添加页面,在一对多和多对多的项后加了一个+号 b.点击这个加号,会弹出对应的添加 页面,在新的添加 c.添 ...
- Jedis cluster命令执行流程剖析
Jedis cluster命令执行流程剖析 在Redis Cluster集群模式下,由于key分布在各个节点上,会造成无法直接实现mget.sInter等功能.因此,无论我们使用什么客户端来操作Red ...
- JAVA EXAM2 复习提纲
[真假分数相加] //inheritence, extends, use this & super 子类的方法 //two constructors, non-default use 'thi ...
- 同种类型不同名字的变量在for循环中操作
InfoViewController * info = [[InfoViewController alloc] init]; HeroViewController * hero = [[HeroVie ...
- jenkins如何获取text parameter多行的文本内容
如果是string的插件 可以直接获取 但text的不可以 如果用 echo %aaa% 这种方式进行打印的话 会发现只打印了第一行 最后的解决方案: 使用了python脚本 在python脚本里通过 ...