【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 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
随机推荐
- Pandas基本功能之算术运算、排序和排名
算术运算和数据对齐 Series和DataFrame中行运算和列运算有种特征叫做广播 在将对象相加时,如果存在不同的索引对,则结果的索引就是该索引对的并集.自动的数据对齐操作在不重叠的索引处引入了NA ...
- Python基础之Python分类
python环境 编译型: 一次性将所有程序编译成二级制文件,开发效率极低,因为一旦出现BUG所有的程序需要全部重新编译 缺点: 开发效率低,不能跨平台 优点: 执行速度快 解释型: 当程序执行时,一 ...
- 终端设备 tty，pty，pts 概念与文件描述符的联系
第1节 理解终端设备tty.pty.pts概念 简要描述: 终端设备默认具有输入.输出功能. 现代我们最常用的接入服务器端的方式(如:ssh通过tcp/ip的方式连接服务器端,作为服务器的终端设备)为 ...
- 基本数据类型(dict)
05. 基本数据类型(dict)内容:1. 字典的简单介绍2. 字典增删改查和其他操作3. 字典的嵌套⼀. 字典的简单介绍字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对 ...
- python基础入门学习1
python比较 -python执行效率低,开发效率高. -JAVA执行效率高,开发效率低. python种类多:比如Jpython Cpython pypy(这是Cpython开发的python) ...
- poj1984（带权并查集）
题目链接:http://poj.org/problem?id=1984 题意:给定n个farm,m条边连接farm,k组询问,询问根据前t3条边求t1到t2的曼哈顿距离,若不可求则输出-1. 思路:类 ...
- 中国剩余定理模板 51nod 1079
题目链接:传送门 推荐博客:https://www.cnblogs.com/freinds/p/6388992.html (证明很好,代码有误). 1079 中国剩余定理 基准时间限制:1 秒 空间 ...
- elasticsearch查询语句总结
query 和 filter 的区别请看:https://www.cnblogs.com/bainianminguo/articles/10396956.html Filter DSL term 过 ...
- echarts横向柱状图如果想打开网址
代码: var data = eval(data); var xList = new Array(); var yList = new Array(); var urlList = new Array ...
- git ----（2）
Git使用40个16进制字符的SHA-1 Hash来唯一标识对象 Git的四种基本对象类型,组成了Git更高级的数据结构: blobs: 每个blob代表一个(版本的)文件,blob只包含文 ...